PDF export in Angular TreeGrid component

The PDF export feature allows you to export TreeGrid data to a PDF document. To enable this functionality, set the allowPdfExport property to true. Exporting is initiated by calling the pdfExport method.

To use the PDF export functionality, you must inject the PdfExport module into the TreeGrid.

You can watch this video to learn how to perform exports and customize them in the Angular TreeGrid.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, PdfExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
import { PdfExportProperties } from '@syncfusion/ej2-grids';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],

providers: [PageService,
                PdfExportService,
                ToolbarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' #treegrid height='220' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowPdfExport]='true' [pageSettings]='pager' [treeColumnIndex]='1'  childMapping='subtasks' [toolbar]='toolbarOptions'>
        <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
        </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public pager?: Object;
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = sampleData;
        this.pager = { pageSize: 7 };
        this.toolbarOptions = ['PdfExport'];
    }
    toolbarClick(args: Object | any) : void {
        if (args['item'].text === 'PDF Export') {
            (this.treeGridObj as TreeGridComponent).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

You can show or hide a spinner component during the export process by using the showSpinner and hideSpinner methods. Use the toolbarClick event to show the spinner before exporting and the pdfExportComplete event to hide it after the export is finished.

In the following demo, the default spinner component is rendered when exporting the TreeGrid.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, PdfExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'




import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { TreeGridComponent, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],

providers: [PageService,
                PdfExportService,
                ToolbarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid id='TreeGrid' [dataSource]='data' height='220' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowPdfExport]='true' [treeColumnIndex]='1'  childMapping='subtasks' [toolbar]='toolbarOptions' (pdfExportComplete)='pdfExportComplete()'>
                    <e-columns>
                        <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                        <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                        <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
                        <e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
                    </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('treegrid')  public treegrid?: TreeGridComponent;

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

    toolbarClick(args: ClickEventArgs): void {
        if (args['item'].text === 'PDF Export') {
            (this.treegrid as TreeGridComponent).showSpinner();
            (this.treegrid as TreeGridComponent).pdfExport();
        }
    }

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

Custom data source

PDF export provides an option to define a data source dynamically before exporting. To export data dynamically, define the dataSource in exportProperties.

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, PdfExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
import { PdfExportProperties, RowDataBoundEventArgs, PdfQueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule,
    ],

providers: [PageService,
                PdfExportService,
                ToolbarService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid [dataSource]='data' #treegrid height='220' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowPdfExport]='true' [pageSettings]='pager' [treeColumnIndex]='1'  childMapping='subtasks' [toolbar]='toolbarOptions'>
        <e-columns>
                    <e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
                    <e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
                    <e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
                    <e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
        </e-columns>
                </ejs-treegrid>`
})
export class AppComponent implements OnInit {

    public data?: Object[];
    public pager?: Object;
    @ViewChild('treegrid')
    public treeGridObj?: TreeGridComponent;
    public toolbarOptions?: ToolbarItems[];

    ngOnInit(): void {
        this.data = sampleData;
        this.pager = { pageSize: 7 };
        this.toolbarOptions = ['PdfExport'];
    }
    toolbarClick(args: Object| any) : void {
        if (args['item'].text === 'PDF Export') {
            let exportProperties: PdfExportProperties = {
                dataSource: sampleData,
            };
            (this.treeGridObj as TreeGridComponent).pdfExport(exportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting Custom Aggregates in Tree Grid

The Tree Grid enables exporting custom aggregates, which summarize column data, to an PDFdocument using the PdfAggregateQueryCellInfo event.

In the provided example, the customAggregateFn function computes the item count for a selected category, while the PdfAggregateQueryCellInfo event customizes the exported cell values in the PDFdocument.

import { Component, OnInit, ViewChild } from '@angular/core';
import { summaryData } from './datasource';
import { getObject, PdfExportProperties } from '@syncfusion/ej2-angular-grids';
import { TreeGridComponent, TreeGridAllModule, ToolbarItems } from '@syncfusion/ej2-angular-treegrid';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { DropDownList } from '@syncfusion/ej2-angular-dropdowns';

@Component({
    selector: 'app-container',
    template: `<ejs-treegrid #treegrid [dataSource]='dataSource' gridLines="Both" height='350' childMapping='subtasks' [allowPdfExport]='true' [toolbar]='toolbarOptions' (toolbarClick)='toolbarClick($event)' [treeColumnIndex]='1' (dataBound)='onDataBound($event)' (pdfAggregateQueryCellInfo)="pdfAggregateQueryCellInfo($event)">
      <e-columns>
          <e-column field='ID' headerText='Order ID' width='120' textAlign='Left'></e-column>
          <e-column field='Name' headerText='Shipment Name' textAlign="Left" clipMode='EllipsisWithTooltip' width='230' ></e-column>
          <e-column field='shipmentDate' headerText='Shipment Date' width="120" type="date" format="yMd" textAlign="Right"></e-column>
          <e-column field='category' headerText='Category' width='200' minWidth='240' textAlign="Left" ></e-column>
          <e-column field='units' headerText='Units' width='80' type='number' textAlign="Right"  ></e-column>
          <e-column field='unitPrice' headerText='Unit Price($)' width='120'  type='number' textAlign="Right" format='C2' ></e-column>
          <e-column field='price' headerText='Price($)' width='110' type='number' format='C0'  textAlign="Right" ></e-column>
      </e-columns>
      <e-aggregates >
              <e-aggregate [showChildSummary]='false'>
                  <e-columns >
                      <e-column columnName="category" type="Custom" [customAggregate]="customAggregateFn">
                          <ng-template #footerTemplate  let-data>
                             <span>Count of <input type="text" id="customers" /> : </span>
                           </ng-template>
                      </e-column>
                  </e-columns>
              </e-aggregate>
          </e-aggregates>
  </ejs-treegrid>`,
    standalone: true,
    imports: [TreeGridAllModule],
})
export class AppComponent {
    public dataSource: Object[] = [];
    public foods: any;
    public selectedCategory: string = 'Seafood';
    public listObj!: DropDownList;
    public toolbarOptions?: ToolbarItems[];
    public customAggregateFn!: (data: Object) => number;
    public countLength: number = 0;
    public stringAlign: string = 'Left';
    public numberAlign: string = 'Right';
    @ViewChild('treegrid')
    public treegrid!: TreeGridComponent;
    ngOnInit(): void {
        this.dataSource = summaryData;
        this.foods = [
            { food: 'Seafood' },
            { food: 'Dairy' },
            { food: 'Edible' },
            { food: 'Crystal' },
        ];
        this.toolbarOptions = ['PdfExport'];
        this.customAggregateFn = this.createCustomAggregateFn(
            this.selectedCategory
        );
    }

    //Custom aggregate function to calculate the count of items for the selected category.
    private createCustomAggregateFn(
        selectedValue: string
    ): (data: Object) => number {
        return (data: Object): number => {
            const sampleDatas: any = getObject('result', data) ?? data;
            return sampleDatas
                ? sampleDatas.filter(
                    (item: Object) => getObject('category', item) === selectedValue
                ).length
                : 0;
        };
    }

    //Handles the 'pdfAggregateQueryCellInfo' event to customize aggregate cells during PDF export.
    public pdfAggregateQueryCellInfo = (args: any): void => {
        if (args.cell.column.headerText === 'Category') {
            args.value =
                'Count of ' +
                this.selectedCategory +
                ' : ' +
                args.row.data.category.Custom;
        }
    };

    //Initializes a DropDownList in the footer for category selection.
    onDataBound(args: any): void {
        if (!isNullOrUndefined(this.listObj)) {
            this.listObj.destroy();
        }
        var proxy = this;
        this.listObj = new DropDownList({
            dataSource: proxy.foods,
            fields: { value: 'food' },
            placeholder: 'Select a Category',
            width: '110px',
            value: this.selectedCategory,
            change: () => {
                setTimeout(() => {
                    this.selectedCategory = (this.listObj as any).value.toString();
                    proxy.selectedCategory = this.selectedCategory;
                    proxy.customAggregateFn = proxy.createCustomAggregateFn(
                        proxy.selectedCategory
                    );
                    proxy.treegrid.refresh();
                }, 300);
            },
        });
        this.listObj.appendTo('#customers');
    }
    toolbarClick(args: Object | any): void {
        if (args['item'].text === 'PDF Export') {
            let exportProperties: PdfExportProperties = {
                pageOrientation: 'Landscape',
            };
            this.treegrid?.pdfExport(exportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular TreeGrid feature tour page for its groundbreaking feature representations. You can also explore our Angular TreeGrid example to learn how to present and manipulate data.