Syncfusion AI Assistant

How can I help you?

PDF Export in Angular Grid Component

19 Mar 202624 minutes to read

The PDF export feature in the Syncfusion® Angular Grid exporting grid data to a PDF document, providing the ability to generate printable reports or share data in a standardized format.

To enable PDF export in the Grid, set the allowPdfExport property to true and use the pdfExport method. To use PDF export, inject the PdfExportService module to the providers array.

The following example demonstrates performing a PDF export action in the grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule ],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions'
                height='272px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            (this.grid as GridComponent).pdfExport();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show spinner while exporting

Displaying a spinner while exporting in the Syncfusion® Angular Grid enhances the experience by providing visual indication during the export process. This indicates the export progress and prevents confusion about operation status.

To show or hide a spinner while exporting the grid, use the showSpinner and hideSpinner methods within the toolbarClick event.

The toolbarClick event triggers when a toolbar item in the Grid is clicked. Within the event handler, verify if the clicked “item” relates to PDF export by checking for the “Grid_pdfexport” identifier. When matched, call the showSpinner method on the Grid instance to display the spinner.

To hide the spinner after export completes, bind the pdfExportComplete event and call the hideSpinner method on the Grid instance.

The following example demonstrates showing and hiding the spinner during PDF export in the Grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PageService, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [PdfExportService, ToolbarService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]=true [toolbar]='toolbarOptions' height='245px' [allowPdfExport]='true' (pdfExportComplete)='pdfExportComplete()'
    (toolbarClick)='toolbarClick($event)'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='ProductName' headerText='Product Name' width=110></e-column>
            <e-column field='Quantity' headerText='Quantity' width=100></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid')  public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid as GridComponent).showSpinner();
            (this.grid as GridComponent).pdfExport();
        } 
    }

    pdfExportComplete(): void {
        (this.grid as GridComponent).hideSpinner();
    }
    
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Binding custom data source while exporting

The PDF export feature provides an option to define a custom data source during export. This enables exporting data not bound to the Grid, which can be generated or retrieved based on application logic.

To export data, define the dataSource property within the pdfExportProperties object. This property specifies the data source for PDF export.

The following example demonstrates rendering a custom data source during PDF export. By utilizing the pdfExport method with the pdfExportProperties object through the Grid instance, the data exports to PDF using the dynamically defined data source.

import { changedData, data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PageService, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    providers: [PdfExportService, ToolbarService, PageService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' [toolbar]='toolbarOptions'
                height='220px' [allowPaging]='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=110></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const pdfExportProperties: PdfExportProperties = {
                dataSource: changedData,
            };
            (this.grid as GridComponent).pdfExport(pdfExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Make sure to utilize the field property that is declared in the Grid columns when modifying the data source for exporting.

Exporting with custom aggregate

Custom aggregates in the Syncfusion® Angular Grid export grid data with additional calculated values based on specific requirements. This feature displays a comprehensive data view in the exported file by incorporating aggregated information needed for analysis or reporting purposes.

To utilize custom aggregation, specify the type property as Custom and provide the customAggregate function in the customAggregate property.

Within the “customAggregateFn” function, receive input data containing a result property. The function calculates the count of objects where the “Ship Country” field equals “Brazil” and returns the count with a descriptive label.

The following example shows exporting the Grid with a custom aggregate that calculates the “Brazil” count in the “Ship Country” column.

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ReturnType } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='245px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipCountry' headerText='ShipCountry' width=100></e-column>
                    </e-columns>
                    <e-aggregates>
                        <e-aggregate>
                            <e-columns>
                                <e-column
                                columnName="ShipCountry"
                                type="Custom"
                                [customAggregate]="customAggregateFn"
                                >
                                <ng-template #footerTemplate let-data> {{ data.Custom }}
                                </ng-template>
                                </e-column>
                            </e-columns>
                        </e-aggregate>
                    </e-aggregates>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];

    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid as GridComponent).pdfExport();
        }
    }

    public customAggregateFn = (customData: object[] | { result?: object[] }) => {
        let data: object[] = [];
    
        if ('result' in customData && Array.isArray(customData.result)) {
            data = customData.result;
        } else if (Array.isArray(customData)) {
            data = customData;
        }
    
        const brazilCount = data.filter((item: object) => (item as itemType)['ShipCountry'] === 'Brazil').length;
    
        return `Brazil count: ${brazilCount}`;
    };
}

interface itemType {
    OrderID: number;
    CustomerID: string;
    EmployeeID: number;
    OrderDate: Date;
    ShipName: string;
    ShipCountry: string;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting with cell and row spanning

Exporting data from the Syncfusion® Angular Grid with cell and row spanning maintains cell and row layout in the exported data. This feature is useful when the Grid contains merged cells or rows and the same structure needs preservation in the exported file.

To achieve this, utilize the rowSpan and colSpan properties in the queryCellInfo event of the Grid. This event allows definition of span values for specific cells. Additionally, customize the appearance of Grid cells during export using the pdfQueryCellInfo event of the Grid.

The following example demonstrates export with cell and row spanning using queryCellInfo and pdfQueryCellInfo events of the Grid.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AggregateService, Column, GridComponent, GridModule, PdfExportService, PdfQueryCellInfoEventArgs, QueryCellInfoEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule ],
    providers: [PdfExportService, ToolbarService,AggregateService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' gridLines="Both" [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' (pdfQueryCellInfo)="pdfQueryCellInfo($event)" (queryCellInfo)="queryCellInfoEvent($event)">
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' width=80></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid as any).pdfExport();
        }
    }

    queryCellInfoEvent = function (args: QueryCellInfoEventArgs) {

        switch ((args.data as columnDataType).OrderID) {
            case 10248:
                if ((args.column as Column).field === 'CustomerID') {
                    args.rowSpan = 2;
                }
                break;
            case 10250:
                if ((args.column as Column).field === 'CustomerID') {
                    args.colSpan = 2;
                }
                break;
            case 10252:
                if ((args.column as Column).field === 'OrderID') {
                    args.rowSpan = 3;
                }
                break;
            case 10256:
                if ((args.column as Column).field === 'CustomerID') {
                    args.colSpan = 3;
                }
                break;
            case 10261:
                if ((args.column as Column).field === 'Freight') {
                    args.colSpan = 2;
                }
                break;
        }
    }

    pdfQueryCellInfo = function (args: PdfQueryCellInfoEventArgs) {
        switch ((args.data as columnDataType).OrderID) {
            case 10248:
                if ((args.column as Column).field === 'CustomerID') {
                    (args.cell as PdfCell).rowSpan = 2;
                }
                break;
            case 10250:
                if ((args.column as Column).field === 'CustomerID') {
                    args.colSpan = 2;
                }
                break;
            case 10252:
                if ((args.column as Column).field === 'OrderID') {
                    (args.cell as PdfCell).rowSpan = 3;
                }
                break;
            case 10256:
                if ((args.column as Column).field === 'CustomerID') {
                    args.colSpan = 3;
                }
                break;
            case 10261:
                if ((args.column as Column).field === 'Freight') {
                    args.colSpan = 2;
                }
                break;
        }
    };
}

interface columnDataType{
    field: number;
    OrderID:number,
    Freight:number,
    CustomerID:string,
    ShipCity:string,
    ShipName:string,
    ShipCountry:string,
    ShipPostalCode:number
}

interface PdfCell {
    rowSpan?: number;  
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The updateCell method does not support row and column spanning.

Merge duplicate cells in specific column and export in Grid

Duplicate cells(based on their values) in a specific column of the Syncfusion® Angular Grid can be merged based on their values. This can be achieved by enabling the enableRowSpan property in the Grid. Additionally, duplicate cells in the specified column can be merged during PDF export by using the pdfQueryCellInfo event. This feature enhances data readability and provides a clearer visual presentation both in the UI and in exported documents.

The following example demonstrates merging duplicate cells in the “Order ID” column in both Grid view and export:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PdfExportCompleteArgs, PdfExportService, PdfQueryCellInfoEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { PdfGridCell } from '@syncfusion/ej2-pdf-export';

@Component({
    imports: [ GridModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' [enableRowSpan]="true"
                height='272px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'
                (pdfQueryCellInfo)="pdfQueryCellInfo($event)" (pdfExportComplete)="pdfExportComplete($event)"
                >
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                        <e-column field='City' headerText='Ship City' width=150></e-column>
                    </e-columns>
                </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public currentCell: PdfGridCell | null = null;
    public currentOrderID: number | null = null;;
    public cellIndexCount = 1;
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            (this.grid as GridComponent).pdfExport();
        }
    } 
    pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs) {
        if (!this.currentOrderID && args.column && args.column.field == "OrderID") {
            this.currentOrderID = (args.data as Order)["OrderID"];
            this.currentCell = args.cell as PdfGridCell;
        }
        else if (this.currentOrderID && args.column && args.column.field == "OrderID" && this.currentOrderID == (args.data as Order)["OrderID"]) {
            this.cellIndexCount++;
        } else if (this.currentOrderID !== (args.data as Order)["OrderID"] && args.column && args.column.field == "OrderID") {
            (this.currentCell as PdfGridCell).rowSpan = this.cellIndexCount;
            this.currentOrderID = (args.data as Order)["OrderID"];
            this.currentCell = args.cell as PdfGridCell;
            this.cellIndexCount = 1;
        }
    };
    // Reset the pdf export global variable values
    pdfExportComplete(args: PdfExportCompleteArgs) {
        this.currentOrderID = null;
        this.currentCell = null;
        this.cellIndexCount = 1;
    }
}

interface Order {
    OrderID: number;
    CustomerID: string;
    City: string;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting with custom date format

The exporting functionality in the Syncfusion® Angular Grid exports grid data with custom date formats. This feature is useful when exporting grid data requires customized date values.

To apply a custom date format to Grid columns during export, use the format property. This property allows definition of a custom format using format options.

The following example demonstrates exporting Grid data with a custom date format. In this example, the formatOptions object is used as the format property for the “Order Date” column. This custom date format displays the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g., Thu, Jul 4, ‘96).

import { data } from './datasource';
import { Component,, OnInit, ViewChild } from '@angular/core';
import { AggregateService, GridComponent, GridModule, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule ],
    providers: [PdfExportService, ToolbarService,AggregateService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='OrderDate' headerText='Order Date' [format]='formatOptions' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' width=80></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public formatOptions?: object;
    @ViewChild('grid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
        this.formatOptions = { type: 'date', format: "EEE, MMM d, ''yy" };
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid as GridComponent).pdfExport();
        }
    }
}
import { AppComponent } from './app.component';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting multiple grids

Exporting multiple grids in the Syncfusion® Angular Grid component exports different grids for side-by-side comparison in external applications on the same or different pages of a PDF file. Each grid is identified by its unique ID. Specify which grids to export by listing their “IDs” in the exportGrids property.

Same page

PDF exporting supports exporting multiple grids on the same page. To export grids on the same page, set the multipleExport.type property to AppendToPage in the pdfExportProperties. An option exists to provide blank space between grids using the multipleExport.blankSpace property.

The following example demonstrates exporting multiple grids to the same page in a PDF file when a toolbar item is clicked.

import { data, employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [ GridModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<p><b>First Grid:</b></p>
    <ejs-grid #firstGrid id='FirstGrid' [dataSource]='firstGridData' [toolbar]='toolbarOptions' [allowPdfExport]='true'
        (toolbarClick)='toolbarClick($event)' [exportGrids]='exportGrids'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=110></e-column>
                </e-columns>
                </ejs-grid>
                <p><b>Second Grid:</b></p>
                <ejs-grid #secondGrid id='SecondGrid' [dataSource]='secondGridData' [allowPdfExport]='true'>
                <e-columns>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
                    <e-column field='FirstName' headerText='FirstName' width=100></e-column>
                    <e-column field='LastName' headerText='Last Name' width=100></e-column>
                    <e-column field='City' headerText='City' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public firstGridData?: object[];
    public secondGridData?: object[];
    public toolbarOptions?: ToolbarItems[];
    public exportGrids?: string[];
    @ViewChild('firstGrid') public firstGrid?: GridComponent;
    @ViewChild('secondGrid') public secondGrid?: GridComponent;

    ngOnInit(): void {
        this.firstGridData = data;
        this.secondGridData = employeeData;
        this.toolbarOptions = ['PdfExport'];
        this.exportGrids = ['FirstGrid', 'SecondGrid']
    }

    toolbarClick = (args: ClickEventArgs) => {
        if (args.item.id === 'FirstGrid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const appendPdfExportProperties: PdfExportProperties = {
                multipleExport: { type: "AppendToPage", blankSpace: 10 }
            };
            (this.firstGrid as GridComponent).pdfExport(appendPdfExportProperties, true);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

New page

The PDF export functionality enables exporting multiple grids into separate pages (each grid on a new page) within the PDF file.

To achieve this:

  1. Access the pdfExportProperties of the Grid component.

  2. Set the multipleExport.type property to NewPage.

  3. Trigger the PDF export operation.

The following example demonstrates exporting multiple grids to a PDF file when a toolbar item is clicked.

import { data, employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
    imports: [ GridModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<p><b>First Grid:</b></p>
    <ejs-grid #firstGrid id='FirstGrid' [dataSource]='firstGridData' [toolbar]='toolbarOptions' [allowPdfExport]='true'
        (toolbarClick)='toolbarClick($event)' [exportGrids]='exportGrids'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=110></e-column>
                </e-columns>
                </ejs-grid>
                <p><b>Second Grid:</b></p>
                <ejs-grid #secondGrid id='SecondGrid' [dataSource]='secondGridData' [allowPdfExport]='true'>
                <e-columns>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
                    <e-column field='FirstName' headerText='FirstName' width=100></e-column>
                    <e-column field='LastName' headerText='Last Name' width=100></e-column>
                    <e-column field='City' headerText='City' width=100></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public firstGridData?: object[];
    public secondGridData?: object[];
    public toolbarOptions?: ToolbarItems[];
    public exportGrids?: string[];
    @ViewChild('firstGrid') public firstGrid?: GridComponent;
    @ViewChild('secondGrid') public secondGrid?: GridComponent;

    ngOnInit(): void {
        this.firstGridData = data;
        this.secondGridData = employeeData;
        this.toolbarOptions = ['PdfExport'];
        this.exportGrids = ['FirstGrid', 'SecondGrid'];
    }

    toolbarClick = (args: ClickEventArgs) => {
        const appendPdfExportProperties: PdfExportProperties = {
            multipleExport: { type: 'NewPage' }
        };
        if (args.item.id === 'FirstGrid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            (this.firstGrid as GridComponent).pdfExport(appendPdfExportProperties, true);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitations

Multiple grids exporting feature is not supported with server side exporting.

Exporting hierarchy grid

Exporting a hierarchy grid in the Syncfusion® Angular Grid component generates a PDF document that includes the master grid along with its child grids. This feature is useful when exporting hierarchical data with its related details.

To achieve this, customize the exporting behavior by using the pdfExportProperties.hierarchyExportMode property of the Grid.

The hierarchyExportMode property specifies the exporting behavior for the hierarchy grid. Available options are:

Mode Behavior
Expanded Exports the master grid with expanded child grids.
All Exports the master grid with all child grids, expanded or not.
None Exports only the master grid without any child grids.

The following example demonstrates exporting a hierarchical grid to a PDF document. Change the pdfExportProperties.hierarchyExportMode property by using the value property of the DropDownList component.

import { data, employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { DetailRowService, GridModule, PdfExportService, ToolbarService, GridComponent, ToolbarItems, PdfExportProperties, GridModel, } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule, DropDownListAllModule ],
    providers: [PdfExportService, ToolbarService, DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
        <label style="padding: 10px 10px 26px 0"> Change the hierarchy export mode: </label>
        <ejs-dropdownlist
        style="margin-top:5px"
        #dropDownList
        index="0"
        width="150"
        [dataSource]="ddlData"></ejs-dropdownlist>
    </div>
    <ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' [childGrid]='childGrid'
    height='220px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
        <e-columns>
            <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
            <e-column field='FirstName' headerText='FirstName' width=100></e-column>
            <e-column field='LastName' headerText='Last Name' width=100></e-column>
            <e-column field='City' headerText='City' width=100></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {
    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    @ViewChild('dropDownList')
    public dropDownList?: DropDownListComponent;
    public ddlData: object[] = [
        { text: 'Expanded', value: 'Expanded' },
        { text: 'All', value: 'All' },
        { text: 'None', value: 'None' },
    ];

    public childGrid: GridModel = {
        dataSource: data,
        queryString: 'EmployeeID',
        columns: [
            {
                field: 'OrderID',
                headerText: 'Order ID',
                textAlign: 'Right',
                width: 90,
            },
            { field: 'CustomerID', headerText: 'Customer ID', width: 100 },
            { field: 'ShipCity', headerText: 'Ship City', width: 100 },
            { field: 'ShipName', headerText: 'Ship Name', width: 110 },
        ],
    };

    ngOnInit(): void {
        this.data = employeeData;
        this.toolbarOptions = ['PdfExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const exportProperties: PdfExportProperties = {
                hierarchyExportMode: (this.dropDownList as DropDownListComponent).value as PdfExportProperties["hierarchyExportMode"],
            };
            (this.grid as GridComponent).pdfExport(exportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Format the child grid columns before exporting

The Syncfusion® Angular Grid allows customization of the child Grid’s PDF export options, enabling precise control over data formatting before export. This functionality is achieved using the exportDetailDataBound event, which triggers for each child Grid during the export process. This event provides access to the child Grid instance, allowing modifications to its column formatting before generating the PDF document.

In the following example, the exportDetailDataBound event modifies the “Order Date” column of the child Grid. By setting the column’s format property, the date values display as dd/MM/yyyy when exported to PDF document.

import { data, employeeData } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnModel, DetailDataBoundEventArgs, DetailRowService, GridComponent, GridModel, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [PdfExportService, ToolbarService, DetailRowService],
    standalone: true,
    selector: 'app-root',
    template: `
    <ejs-grid #grid id="Grid" [dataSource]="data" [toolbar]="toolbarOptions" [childGrid]="childGrid" height="220px" [allowPdfExport]="true" (toolbarClick)="toolbarClick($event)" (exportDetailDataBound)="exportDetailDataBound($event)">
        <e-columns>
            <e-column field="EmployeeID" headerText="Employee ID" textAlign="Right" width="90"></e-column>
            <e-column field="FirstName" headerText="FirstName" width="100"></e-column>
            <e-column field="LastName" headerText="Last Name" width="100"></e-column>
            <e-column field="City" headerText="City" width="100"></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {
    @ViewChild("grid") public grid?: GridComponent;
    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public childGrid: GridModel = {
        dataSource: data,
        queryString: "EmployeeID",
        columns: [
            { field: "OrderID", headerText: "Order ID", textAlign: "Right", width: 90 },
            { field: "CustomerID", headerText: "Customer ID", width: 100 },
            { field: "OrderDate",  headerText: "Order Date",  width: 120, format: { type: 'date', format: 'dd-MM-yyyy' }},
            { field: "ShipCity", headerText: "Ship City", width: 100 }
        ],
    };
    ngOnInit(): void {
        this.data = employeeData;
        this.toolbarOptions = ["PdfExport"];
    }
    public exportDetailDataBound(args: DetailDataBoundEventArgs): void {
        // Set the date format for the OrderDate column before exporting.
        ((args.childGrid as GridModel).columns as ColumnModel[])[2].format = { type: 'date', format: 'dd\\/MM\\/yyyy' };
    }
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            const exportProperties: PdfExportProperties = {
              hierarchyExportMode: 'All',
            };
            (this.grid as GridComponent).pdfExport(exportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Remove header row while exporting

The Syncfusion® Angular Grid PDF exporting feature provides option to remove the header row from the exported file. This is useful when exporting grid data without including the header values in the exported document.

To achieve this, utilize the pdfHeaderQueryCellInfo event of the Grid. This event allows customization of the header cells during the PDF export process. By handling this event, remove the header row from the exported file by not providing any content and height for the header cells. This ensures that the exported file contains only the data rows without header information.

The following example demonstrates performing export without a header using the pdfHeaderQueryCellInfo event of the Grid.

import { Cell, data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { AggregateService, GridComponent, GridModule, PdfExportService, PdfHeaderQueryCellInfoEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule],
    providers: [PdfExportService, ToolbarService,AggregateService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' (pdfHeaderQueryCellInfo)="pdfHeaderQueryCellInfo($event)">
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                        <e-column field='ShipCountry' headerText='Ship Country' width=100></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid as GridComponent).pdfExport();
        }
    }

    pdfHeaderQueryCellInfo({cell}: PdfHeaderQueryCellInfoEventArgs) {
        const typedCell = cell as Cell;
        typedCell.value = '';
        if (typedCell.value === '') {
            typedCell.height = '';
        }

    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See also

Exporting Grid in Cordova application