Pdf Export Options in Angular Grid Component

17 May 202524 minutes to read

The Syncfusion Angular Grid component allows you to customize the PDF export options functionality. This flexibility enables you to have greater control over the exported content and layout to meet your specific requirements.

The PDF export action can be customized based on your requirements using the pdfExportProperties property. By using the pdfExportProperties property, you can export the current page records, selected records, or filtered records. Additionally, you can customize the page alignments using the pdfExportProperties property.

Export current page records

Exporting the current page in Syncfusion Angular Grid to a PDF document provides the ability to export the currently displayed page records. This feature allows for generating PDF documents that specifically include the content from the current page of the grid.

To export the current page of the grid to a PDF document, you need to specify the exportType property as CurrentPage.

The following example demonstrates how to export current page to a PDF document when a toolbar item is clicked.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService,ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'




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

@Component({
imports: [
        
        GridModule
    ],

providers: [PdfExportService,PageService, ToolbarService],
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=100></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 = {
                exportType: 'CurrentPage'
            };
            (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));

Export selected records

Exporting only the selected records from the Syncfusion Angular Grid allows generating PDF document that include only the desired data from the Grid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted PDF exports.

To export only the selected records by utilizing the exportProperties.dataSource property in the toolbarClick event.

To export the selected records from the grid to a PDF file, you can follow these steps:

  1. Handle the toolbarClick event of the Grid.

  2. Retrieve the selected records using the getSelectedRecords method.

  3. Assign the selected data to the exportProperties.dataSource property.

  4. Trigger the export operation using the pdfExport method.

The following example demonstrates how to export the selected records to a PDF document.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, SelectionService,ToolbarService, PdfExportService,PageService, FilterService } from '@syncfusion/ej2-angular-grids'



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

@Component({
imports: [
        
        GridModule
    ],

providers: [ SelectionService,ToolbarService, PdfExportService,PageService, FilterService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' [allowPaging]='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [selectionSettings]='selectionSettings'>
                <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-columns>
              </ejs-grid>`,
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public selectionSettings?: SelectionSettingsModel;
    @ViewChild('grid') public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['PdfExport'];
        this.selectionSettings = { type: 'Multiple', enableSimpleMultiRowSelection: true };
    }

    toolbarClick(args: ClickEventArgs) {
        if (args.item.id === 'Grid_pdfexport') {
            const selectedRecords = (this.grid as GridComponent).getSelectedRecords();
            const exportProperties = {
                dataSource: selectedRecords
            };
            (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));

Export filtered records

Exporting only the filtered records from the Syncfusion Angular Grid allows you to generate PDF document that include only the data that matches your applied filters. This feature is useful when you want to export a subset of data based on specific criteria.

This can be achieved by defining the filtered data in the exportProperties.dataSource property before initiating the export.

To export only the filtered data from the grid to a PDF file, you can follow these steps:

  1. Apply the desired filter to the grid data.

  2. Get the filtered data using the getFilteredRecords method.

  3. Assign the filtered data to the exportProperties.dataSource property.

  4. Trigger the export operation using the pdfExport method.

The following example demonstrates how to export the filtered records to a PDF document.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService, PageService, FilterService } from '@syncfusion/ej2-angular-grids'



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

@Component({
imports: [
        
        GridModule
    ],

providers: [ToolbarService, PdfExportService, PageService, FilterService],
standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' [allowFiltering]='true' [allowPaging]='true' [pageSettings]='initialPage' [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-columns>
              </ejs-grid>`,
})
export class AppComponent implements OnInit {

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

  ngOnInit(): void {
    this.data = data;
    this.toolbarOptions = ['PdfExport'];
    this.initialPage = { pageCount: 5, pageSize: 5 };
  }

  toolbarClick(args: ClickEventArgs) {
    if (args.item.id === 'Grid_pdfexport') {
      const filteredRecords = (this.grid as GridComponent).getFilteredRecords();
        const exportProperties = {
          dataSource: filteredRecords,
        };
        (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));

Export with hidden columns

Exporting hidden columns in the Syncfusion Angular Grid allows you to include hidden columns in the exported PDF document. This feature is useful when you have columns that are hidden in the UI but still need to be included in the exported document.

To export hidden columns of the grid to a PDF file, you need to set the includeHiddenColumn property as true in the pdfExportProperties property.

The following example demonstrates how to export hidden columns to a PDF file. In this example, the ShipCity column, which is not visible in the UI, is exported to the PDF document. You can also export the grid by changing the pdfExportProperties.includeHiddenColumn property based on the switch toggle using the checked property of the EJ2 Toggle Switch Button component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'




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

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [PdfExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
    <label style="padding: 10px 10px">
    Enable or disable includeHiddenColumn property
    </label>
    <ejs-switch #switch id="switch"></ejs-switch>
    </div>
    <ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' [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='ShipName' headerText='Ship Name' width=130></e-column>
            <e-column field='ShipCity' headerText='Ship City' [visible]='false'  width=120></e-column>
            <e-column field='ShipCountry' headerText='ShipCountry' 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('switch')
    public switch?: SwitchComponent;

    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 = {
                includeHiddenColumn: (this.switch as SwitchComponent).checked as boolean,
            };
            (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));

Show or hide columns while exporting

The Syncfusion Angular Grid component provides the functionality to show or hide columns dynamically during the export process. This feature allows you to selectively display or hide specific columns based on your requirements.

To show or hide columns based on user interaction during the export process, you can follow these steps:

  1. Handle the toolbarClick event of the Grid component.

  2. Update the visibility of the desired columns by setting the visible property of the column to true or false.

  3. Export the grid to PDF.

  4. Handle the pdfExportComplete event to restore the column visibility to its original state.

In the following example, the CustomerID is initially a hidden column in the grid. However, during the export process, the CustomerID column is made visible, while the ShipCity column is hidden.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'




import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, Column } 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' (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' [visible]='false' width=100></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
                        <e-column field='ShipCountry' headerText='ShipCountry' 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).columns[1] as Column).visible = true;
            ((this.grid as GridComponent).columns[2] as Column ).visible = false;
            (this.grid as GridComponent).pdfExport();
        }
    }

    pdfExportComplete(): void {
        ((this.grid as GridComponent).columns[1] as Column).visible = false;
        ((this.grid as GridComponent).columns[2] as Column).visible = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide columns while exporting with stacked header

The Syncfusion Angular Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.

To implement the show or hide columns feature during PDF export in the Syncfusion Angular Grid, follow these steps:

  1. Handle the toolbarClick event of the Syncfusion Angular Grid.

  2. Update the visibility of the desired columns by setting the visible property of the column to true or false.

  3. Export the Syncfusion Angular Grid to PDF document using pdfExport method.

  4. Handle the pdfExportComplete event to restore the column visibility to its original state.

In the following example, the ShipName is initially a hidden column in the Syncfusion Angular Grid. However, during the PDF export process, the ShipName column is made visible, while the OrderDate column is hidden:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService,ColumnModel } from '@syncfusion/ej2-angular-grids'
import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, Column } 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' (pdfExportComplete)='pdfExportComplete()' (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' [visible]='false' width=100></e-column>
          <e-column headerText="Order Details" [columns]="orderColumns" textAlign='Center'></e-column>
          <e-column headerText="Ship Details" [columns]="shipColumns" textAlign='Center'></e-column>
        </e-columns>
      </ejs-grid>`
})
export class AppComponent {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  public orderColumns?: ColumnModel[];
  public shipColumns?: ColumnModel[];
  
  ngOnInit(): void  {
    this.data = data;
    this.toolbarOptions = ['PdfExport'];
    this.orderColumns = [
      {
        field: 'OrderDate',
        headerText: 'Order Date',
        format: 'yMd',
        width: 130,
        textAlign: 'Right',
        minWidth: 10,
      },
      {
        field: 'Freight',
        headerText: 'Freight ($)',
        width: 120,
        format: 'C1',
        textAlign: 'Right',
        minWidth: 10,
      },
    ];
    this.shipColumns = [
      {
        field: 'ShippedDate',
        headerText: 'Shipped Date',
        format: 'yMd',
        textAlign: 'Right',
        width: 150,
        minWidth: 10,
      },
      {
        field: 'ShipCountry',
        headerText: 'Ship Country',
        width: 150,
        minWidth: 10,
      },
      {
        field: 'ShipName',
        headerText: 'Ship Name',
        width: 150,
        minWidth: 10,
        visible:false
      },
    ];
  }
  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_pdfexport') { 
      (((this.grid as GridComponent).columns[2] as ColumnModel).columns![0] as Column).visible = false;
      (((this.grid as GridComponent).columns[3] as ColumnModel).columns![2] as Column).visible = true;
      (this.grid as GridComponent).pdfExport();
    }
  }
  public pdfExportComplete(): void {
    (((this.grid as GridComponent).columns[2] as ColumnModel).columns![0] as Column).visible = true;
    (((this.grid as GridComponent).columns[3] as ColumnModel).columns![2] as Column).visible = false;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change page orientation

The Syncfusion Angular Grid component allows you to change the page orientation of the exported PDF document from the default portrait mode to landscape mode. This feature provides the flexibility to adjust the layout and presentation of the exported PDF according to your needs.

To change the page orientation to landscape for the exported document, you can set the pageOrientation property of the pdfExportProperties property.

The supported pageOrientation options are:

  1. Landscape: Exports the grid with a landscape PDF page orientation.

  2. Portrait: Exports the grid with a portrait PDF page orientation.

The following example demonstrates how to export the grid into PDF document by setting the pdfExportProperties.pageOrientation property using the value property of the DropDownList component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



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

@Component({
imports: [
        
        GridModule,
        DropDownListAllModule
    ],

providers: [PdfExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
    <label style="padding: 10px 10px 26px 0"> Change the page orientation property: </label> 
    <ejs-dropdownlist
    style="margin-top:5px"
    #dropDownList
    index="0"
    width="100"
    [dataSource]="ddlData">
    </ejs-dropdownlist>
    </div>
    <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='ShipCity' headerText='Ship City' width=120></e-column>
                        <e-column field='ShipName' headerText='Ship Name' 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: 'Portrait', value: 'Portrait' },
      { text: 'Landscape', value: 'Landscape' },
    ];

    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 = {
                pageOrientation: (this.dropDownList as DropDownListComponent).value as PdfExportProperties["pageOrientation"],
            };
            (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));

Change page size

The Syncfusion Angular Grid component allows you to customize the page size of the exported PDF document according to your requirements. This feature provides the flexibility to adjust the layout and dimensions of the exported PDF to fit different paper sizes or printing needs.

To customize the page size for the exported document, you can set the pageSize property of the pdfExportProperties property to the desired page size.

Supported pdfPageSize are:

  • Letter
  • Note
  • Legal
  • A0
  • A1
  • A2
  • A3
  • A4
  • A5
  • A6
  • A7
  • A8
  • A9
  • B0
  • B1
  • B2
  • B3
  • B4
  • B5
  • Archa
  • Archb
  • Archc
  • Archd
  • Arche
  • Flsa
  • HalfLetter
  • Letter11x17
  • Ledger

The following example demonstrates how to export the grid into PDF document by setting the pdfExportProperties.pageSize property by using value property of the DropDownList component.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'




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

@Component({
imports: [
        
        GridModule,
        DropDownListAllModule
    ],

providers: [PdfExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
    <label style="padding: 10px 10px 26px 0"> Change the page size property: </label> 
    <ejs-dropdownlist
    style="margin-top:5px"
    #dropDownList
    index="0"
    width="100"
    [dataSource]="ddlData">
    </ejs-dropdownlist>
    </div>
    <ejs-grid #grid id='Grid' [dataSource]='data'  [toolbar]='toolbarOptions' height='220px' [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='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;
    @ViewChild('dropDownList')
    public dropDownList?: DropDownListComponent;
    public ddlData: object[] = [
      { text: 'Letter', value: 'Letter' },
      { text: 'Note', value: 'Note' },
      { text: 'Legal', value: 'Legal' },
      { text: 'A0', value: 'A0' },
      { text: 'A1', value: 'A1' },
      { text: 'A2', value: 'A2' },
      { text: 'A3', value: 'A3' },
      { text: 'A4', value: 'A4' },
      { text: 'A5', value: 'A5' },
      { text: 'A6', value: 'A6' },
      { text: 'A7', value: 'A7' },
      { text: 'A8', value: 'A8' },
      { text: 'B0', value: 'B0' },
      { text: 'B1', value: 'B1' },
      { text: 'B2', value: 'B2' },
      { text: 'B3', value: 'B3' },
      { text: 'B4', value: 'B4' },
      { text: 'B5', value: 'B5' },
      { text: 'Archa', value: 'Archa' },
      { text: 'Archb', value: 'Archb' },
      { text: 'Archc', value: 'Archc' },
      { text: 'Archd', value: 'Archd' },
      { text: 'Arche', value: 'Arche' },
      { text: 'Flsa', value: 'Flsa' },
      { text: 'HalfLetter', value: 'HalfLetter' },
      { text: 'Letter11x17', value: 'Letter11x17' },
      { text: 'Ledger', value: 'Ledger' },
    ];

    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 = {
                pageSize: (this.dropDownList as DropDownListComponent).value as PdfExportProperties["pageSize"],
            };
            (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));

Define file name

The Syncfusion Angular Grid component allows you to specify a custom file name for the exported PDF document. This feature enables you to provide a meaningful and descriptive name for the exported file, making it easier to identify and manage the exported data.

To assign a custom file name for the exported document, you can set the fileName property of the pdfExportProperties property to the desired file name.

The following example demonstrates how to define a file name using pdfExportProperties.fileName property when exporting to PDF, based on the entered value as the file name.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'




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

@Component({
imports: [
        
        GridModule,
        TextBoxModule
    ],

providers: [PdfExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
    <label style="padding: 30px 17px 0 0">Enter file name: </label>
    <ejs-textbox #textbox placeholder="Enter file name" width="120"></ejs-textbox>
    </div>
    <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=100></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;
    @ViewChild('textbox') public textbox?: TextBoxComponent;

    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
            if ((this.textbox as TextBoxComponent).value) {
                const pdfExportProperties: PdfExportProperties = {
                    fileName: (this.textbox as TextBoxComponent).value + '.pdf',
                };
                (this.grid as GridComponent).pdfExport(pdfExportProperties);
            } else {
                const pdfExportProperties: PdfExportProperties = {
                    fileName: 'new.pdf',
                };
                (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));

Enabling horizontal overflow

The Syncfusion Angular Grid component allows you to display all defined grid columns on a single page even when the number of columns exceeds the maximum limits for columns in the exported PDF document. This ensures that your exported PDF maintains its readability and comprehensiveness.

You can achieve this by utilizing the pdfExportProperties.allowHorizontalOverflow property of the grid.

In the following example, the EJ2 Toggle Switch Button component is added to enable and disable the pdfExportProperties.allowHorizontalOverflow property. Based on the switch toggle, the pdfExportProperties.allowHorizontalOverflow property is updated using the checked property, and the export action is performed accordingly when the toolbar is clicked.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'




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

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [PdfExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
    <label style="padding: 10px 10px">
    Enable or disable Horizontal Overflow property
    </label>
    <ejs-switch #switch id="switch"></ejs-switch>
    </div>
    <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='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
            <e-column field='ShipAddress' headerText='Ship Address' width=130></e-column>
            <e-column field='ShipRegion' headerText='Ship Region' width=90></e-column>
            <e-column field='ShipPostalCode' headerText='Ship PostalCode' width=90></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;
    @ViewChild('switch')
    public switch?: SwitchComponent;

    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 = {
              allowHorizontalOverflow: !(this.switch as SwitchComponent).checked as boolean,
            };
            (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));

Customizing columns on export

The Syncfusion Angular Grid component allows you to customize the appearance of grid columns in your exported PDF documents. This feature empowers you to tailor specific column attributes such as field, header text, and text alignment, ensuring that your exported PDFs align perfectly with your design and reporting requirements.

To customize the grid columns, you can follow these steps:

  1. Access the pdfExportProperties.column of the Grid component.

  2. Set the column object with attributes such as field, headerText, and textAlign to define the desired format.

  3. Trigger the PDF export operation to apply the customized column settings.

The following example demonstrates how to customize the grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: OrderID with textAlign set to Right, CustomerID with headerText as “Customer Name”, and Freight with a center-aligned textAlign property, which is not rendered in the grid columns.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'




import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, PdfExportProperties, Column } 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=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=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 pdfExportColumns: Partial<Column>[] = [
            { field: 'OrderID', textAlign: 'Right', width:'90' },
            { field: 'CustomerID', headerText: 'Customer Name', width:'100' },
            { field: 'Freight', textAlign: 'Center', width:'80' },
          ];
    
          const pdfExportProperties: PdfExportProperties = {
            columns: pdfExportColumns as Column[],
          };
          (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));

Font and color customization

The Syncfusion Angular Grid component provides the ability to customize the font in the exported PDF document. This feature allows you to control the appearance and styling of the text in the exported file, ensuring consistency with your application’s design.

Default fonts

By default, the Grid uses the Helvetica font in the exported document. However, you can change the default font by utilizing the pdfExportProperties.theme property. The available default fonts that you can choose from are:

  • Helvetica
  • TimesRoman
  • Courier
  • Symbol
  • ZapfDingbats

To change the default font, you can follow these steps:

  1. Access the pdfExportProperties of the Grid component.

  2. Set the theme property to the desired default font.

  3. Trigger the PDF export operation.

The following example demonstrates, how to change the default font when exporting a document.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService, GroupService,GridComponent, ToolbarItems, PdfExportProperties} from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import {PdfStandardFont,PdfFontFamily,PdfFontStyle } from '@syncfusion/ej2-pdf-export';

@Component({
imports: [GridModule],
providers: [PdfExportService, ToolbarService, GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true' 
    [allowGrouping]='true' [groupSettings]='groupOptions' (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='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            const pdfExportProperties: PdfExportProperties = {
                theme: {
                    header: {
                        font: new PdfStandardFont(
                          PdfFontFamily.TimesRoman,
                          11,
                          PdfFontStyle.Bold
                        ),
                        fontColor: '#000080',
                        bold: true,
                        border: { color: '#5A5A5A', dashStyle: 'Solid' },
                      },
                      caption: { 
                        font: new PdfStandardFont(PdfFontFamily.TimesRoman, 9),
                        fontColor: '#0B6623',
                        bold: true, },
                      record: { 
                        font: new PdfStandardFont(PdfFontFamily.TimesRoman, 10),
                        fontColor: '#B22222',
                        bold: true, },
                }
            };
            (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));

Add custom font

In addition to changing the default font, the Syncfusion Angular Grid allows you to use a custom font for the Grid header, content, and caption cells in the exported document. This can be achieved by utilizing the pdfExportProperties.theme property.

When using a custom font, it’s important to provide the font in a format that can be easily embedded in the exported document. This is typically done by encoding the font file into a base64 string. This base64 encoded font data can then be used within the export settings to ensure the custom font is applied to the exported PDF.

The following example demonstrates how to use the custom Algeria font for exporting the grid. The base64AlgeriaFont variable contains the base64 encoded string representing the Algeria font file. This encoded font data is used in the PDF export properties to specify the custom font.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService, GroupService, GridComponent, ToolbarItems, PdfExportProperties } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, base64AlgeriaFont } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { PdfTrueTypeFont } from '@syncfusion/ej2-pdf-export';

@Component({
imports: [
        
        GridModule
    ],

providers: [PdfExportService, ToolbarService, GroupService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true'
    [allowGrouping]='true' [groupSettings]='groupOptions' (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='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            const pdfExportProperties: PdfExportProperties = {
                theme: {
                    header: {
                        font: new PdfTrueTypeFont(base64AlgeriaFont, 12),
                        fontColor: '#000080',
                        bold: true,
                        border: { color: '#5A5A5A', dashStyle: 'Solid' }
                    },
                    caption: {
                        font: new PdfTrueTypeFont(base64AlgeriaFont, 10),
                        fontColor: '#0B6623',
                        bold: true,
                    },
                    record: {
                        font: new PdfTrueTypeFont(base64AlgeriaFont, 9),
                        fontColor: '#B22222',
                        bold: true,
                    }
                }
            };
            (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));

PdfTrueTypeFont accepts base64 format of the custom font.

Conditional cell customization

When exporting data from the Syncfusion Angular Grid, you have an option to conditionally format the cells in the exported PDF document. This allows you to customize the appearance of specific cells based on their values or other criteria.

To implement conditional cell formatting, you can utilize the pdfQueryCellInfo event of the Grid. Within this event, you can access the cell object using the args.cell property and modify its properties, such as the background color, based on your desired conditions.

The following example demonstrate how to customize the background color of the Freight column in the exported PDF document using the args.cell and backgroundColor properties of the pdfQueryCellInfo event.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'




import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, PdfQueryCellInfoEventArgs, QueryCellInfoEventArgs, Column, PdfStyle } 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' 
                (queryCellInfo)='queryCellInfo($event)' (pdfQueryCellInfo)='pdfQueryCellInfo($event)' (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='Freight' headerText='Freight' width=80></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') {
            (this.grid as GridComponent).pdfExport();
        }
    }

    pdfQueryCellInfo(args: PdfQueryCellInfoEventArgs): void {
        if ((args.column as Column).field === 'Freight') {
            if ((args.value as number) < 30) {
                (args.style as PdfStyle)= { backgroundColor: '#99ffcc' };
            } else if ((args.value as number) < 60) {
                (args.style as PdfStyle) = { backgroundColor: '#ffffb3' };
            } else {
                (args.style as PdfStyle) = { backgroundColor: '#ff704d' };
            }
        }
    }

    queryCellInfo({data, column, cell}: QueryCellInfoEventArgs ): void {
        if ((column as Column).field === 'Freight') {
            const FreightData= (data as columnDataType).Freight;
            if (FreightData < 30) {
                (cell as HTMLElement).style.background = '#99ffcc';
            } else if (FreightData < 60) {
                (cell as HTMLElement).style.background = '#ffffb3';
            } else {
                (cell as HTMLElement).style.background = '#ff704d';
            }
        }
    }
}

interface columnDataType{
    field: number;
    OrderID:number,
    Freight:number,
    CustomerID:string,
    ShipCity:string,
    ShipName:string,
    ShipCountry:string,
    ShipPostalCode:number
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export grid as blob

The Grid offers an option to export the data as a Blob instead of downloading it as a file in the browser. To export the grid as a Blob, set the isBlob parameter to true in the pdfExport method. The grid returns the promise of a blob in the pdfExportComplete event.

The following example demonstrates how to obtain the blob data of the exported grid by executing the promise in the pdfExportComplete event.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, PdfExportService } from '@syncfusion/ej2-angular-grids'


import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, PdfExportCompleteArgs } 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='230px'  [allowPdfExport]='true' 
                (pdfExportComplete)='pdfExportComplete($event)' (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='Freight' headerText='Freight' width=80></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') {
            // pass fourth parameter as true to get the blob data of exported grid
            (this.grid as GridComponent).pdfExport(undefined, undefined, undefined, true);
        }
    }

    pdfExportComplete(args: PdfExportCompleteArgs): void {
        // execute the promise to get the blob data
        if (args && args.promise) { 
            // execute the promise to get the blob data
            args.promise.then((e: { blobData: Blob }) => {
                this.exportBlob(e.blobData);
            });
        }
    }

    public exportBlob = (blob: Blob) => {
        const a: HTMLAnchorElement = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url: string = window.URL.createObjectURL(blob); // Fix typo here
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url); // Fix typo here
        document.body.removeChild(a);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));