How to change the default PDF size while exporting

[Bruno Manjagalli Queiroz]

Hello, 

We are trying to export a grid to pdf and we have the following problem. 

As the table is large, it breaks the export into several pages, according to print. 

Can we adjust the export to "fit" in an a4? 

Thanks

<ejs-grid

            id="Grid"

            #grid

            [allowExcelExport]="true"

            (toolbarClick)="toolbarClick($event)"

            [allowGrouping]="true"

            [allowFiltering]="true"

            [filterSettings]="filterOptions"

            [allowSorting]="true"

            [toolbar]="toolbarOptions"

            [allowPaging]="true"

            [pageSettings]="pageSettings"

            [dataSource]="dataSource"

            [allowResizing]="true"

        >

            <e-columns>

                <e-column

                    field="id"

                    headerText="ID"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="linha"

                    headerText="Linha"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="codigo"

                    headerText="Código"

                    textAlign="Left"

                ></e-column>

                <e-column

                    width="450"

                    field="enderecoInicial"

                    headerText="Endereço inicial"

                    textAlign="Left"

                ></e-column>

                <e-column

                    width="450"

                    field="enderecoFinal"

                    headerText="Endereço final"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="empresa"

                    headerText="Empresa"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="veiculo"

                    headerText="Veículo"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="horainicial"

                    headerText="Hora inicial"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="horafinal"

                    headerText="Hora final"

                    textAlign="Left"

                ></e-column>

                <e-column

                    field="diasString"

                    headerText="Dias"

                    textAlign="Left"

                ></e-column>

 </e-columns>

        </ejs-grid>

if (args.item.id.includes("pdfexport")) {

            this.gridObj.pdfExport();

        }

Attachment: Arquivo_Comprimido_43444618.zip

[Sujith Kumar Rajkumar]

Hi Bruno, 

 

Greetings from Syncfusion support. 

 

Based on the query we could understand that your requirement is to export all the Grid data in a single pdf page. You can achieve this by overriding the Grid pdf export’s processSectionExportProperties(in the Grid’s created event), retrieving the Grid element size properties, calculating the height based on the total Grid page count and setting this new height value to the pdf document’s page size. 

 

This is demonstrated in the below code snippet, 

 

import { PdfPageSettings, SizeF} from '@syncfusion/ej2-pdf-export'; 

 

// Grid’s created event handler 

created() { 

        // The ‘processSectionExportProperties’ method of the pdf export module is overridden 

        (this.grid.pdfExportModule as any).processSectionExportProperties = function (section, pdfExportProperties) { 

            // A new page settings variable is initialized 

            let pdfPageSettings: PdfPageSettings = new PdfPageSettings(); 

            // Grid’s total page count is retrieved 

            var pageCount = this.parent.pageSettings.pageCount; 

            // Grid’s size properties are retrieved 

            var gridResult = this.parent.element.getBoundingClientRect(); 

            // The new size(width and height) for the pdf documented is calculated 

            // new SizeF(Current pdf width, Current Grid element height * page count) 

            let result: SizeF = new SizeF(pdfPageSettings.size.width, gridResult.height * pageCount); 

            // The new size is appended to the pdf page settings size property and assigned to the pdf document 

            pdfPageSettings.size = new SizeF((<any>result).width, (<any>result).height); 

            section.setPageSettings(pdfPageSettings); 

            return section; 

        } 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

Sample: https://stackblitz.com/edit/angular-byiaps?file=app.component.ts 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[Bill Naples]

Hi Sujith,

Your Stackblitz sample doesn't seem to address the original problem. He wants to fit the grid on A4 paper. But that code changes it to a different custom paper size, and then when trying to print the PDF in Chrome, Chrome coerces it to A4, and the scale is very small.

Is there a solution that will keep the page size the same, but resize the grid to fit?

Thanks

[Sujith Kumar Rajkumar]

Hi Bill, 

 

Greetings from Syncfusion support. 

 

While exporting a file to pdf from the Grid the columns will be adjusted(by rendering pdf cells based on the content size) in the pdf layout to render all columns in single page. And when the content exceeds the current page of the pdf then it will automatically break to several pages by default. So when ‘A4’ size page is used the columns will only be rendered in a single page as long as the content does not exceed that page size and when it does it will break to a new page. This is the default behavior of this case. 

 

So if your requirement is to render all the columns in a single page itself, then we suggest you to follow the approach mentioned in our previous update to achieve the same. 

 

Regards, 

Sujith R 

[Bill Naples]

Hi Sujith,

Using your stackblitz sample, it's not breaking pages. It prints just one page with whatever content fits on that first page. The rest of the content is truncated.

BTW, I'm trying to attach screenshots, but this web site is finicky about size. It would be nice if it would just compress it automatically to the desired size.

Thanks.

[Sujith Kumar Rajkumar]

Hi Bill, 

We had meant that by default in pdf export when the content exceeds the current page size it will break to new pages and render the remaining columns there. But the content will not break in the stackblitz sample we had shared since we had increased the page size using customization. 

It would be helpful if you could elaborate on your exact requirement with pictorial or video demonstration to validate further. And if you are facing problem with attaching images, then please let us know the issue that you are facing with the same to check further. 

Regards, 

Sujith R 

[Bill Naples]

I achieved a solution for the grid as shown in code below, but setting the column width doesn't work 100% on the the pivot table. What is the proper way to set width on pivot table when exporting to pdf?

pdfQueryCellInfoFitWidthToPage (args) {

// Fit width to page.

// TODO: Doesn't work so great with pivot table. Squeezes a little but not enough.

const grid = this.gridInstance()

const pdfPrefs = grid._exportPreferences

if (pdfPrefs.fitWidthToPage !== false) {

const pdfColumns = args.cell.gridRow.pdfGrid.columns.internalColumns

if (pdfColumns._widthWasFitToPage) return

const gridWidth = _.sumBy(pdfColumns, col => col.width)

const pageWidthInches = pdfPrefs.pageOrientation === 'Portrait' ? 8.5 : 11

// A PDF point is 1/72 inch. Portrait width is 8.5 inches, and lanscape is 11 inches.

// Default margin seems to be 40 pixels each side, as examined in

// pdfExportModule.processSectionExportProperties callback.

const pageWidthPixels = pageWidthInches * 72 - 80

const widthRatio = Math.min(1, pageWidthPixels / gridWidth)

pdfColumns.forEach(pdfColumn => {

pdfColumn.width *= widthRatio

pdfColumn._widthWasFitToPage = true

})

pdfColumns._widthWasFitToPage = true

}

}

[Sujith Kumar Rajkumar]

Hi Bill, 

 

Before proceeding with the query can you please confirm us if your requirement is in EJ2 Grid component or the Grid inside the EJ2 Pivot table component to validate further. 

 

Regards, 

Sujith R 

[Bill Naples]

Hi Sujith, It's both. My code snippet above works for the EJ2 Grid component. I'm also trying to get it to work for the grid inside the EJ2 Pivot table component, but it doesn't really work, i.e., there's some minor effect on width but not what what the function is specifying. I'm accessing the grid in the EJ2 Pivot table via this.$refs.pivot.ej2Instances.grid

[Sujith Kumar Rajkumar]

Hi Bill, 

 

Thanks for the confirmation. 

 

Please refer to the following code example and reference sample to customize column width while pdf export in Pivot Table component Grid, 

 

dataBound() { 

    if (this.isInit) { 

        this.isInit = false; 

        this.pivotObj.grid.pdfQueryCellInfo = this.pdfQueryCellInfo.bind(this); 

    } 

} 

 

pdfQueryCellInfo(args) { 

    (this.pivotObj.renderModule as any).pdfRowEvent(args); 

    const pdfColumns = args.cell.gridRow.pdfGrid.columns.internalColumns; 

    if (pdfColumns._widthWasFitToPage) return; 

    let gridWidth = 0; 

    pdfColumns.forEach((col) => { 

        gridWidth += col.width; 

    }); 

    const pageWidthPixels = 500; 

    const widthRatio = Math.min(1, pageWidthPixels / gridWidth); 

    pdfColumns.forEach((pdfColumn) => { 

        pdfColumn.width *= widthRatio; 

        pdfColumn._widthWasFitToPage = true; 

    }); 

 

    pdfColumns._widthWasFitToPage = true; 

} 

 

Sample: https://stackblitz.com/edit/angular-bdtkrc?file=app.component.ts 

 

Let us know if you have any concerns. 

 

Regards, 

Sujith R