Pdf Export Options in Angular Grid Component

17 Sep 202524 minutes to read

The Syncfusion Angular Grid component provides multiple options for customizing PDF export functionality. These capabilities enable precise control over the exported content and layout to match your application requirements.

PDF export behavior can be customized using the pdfExportProperties property. With pdfExportProperties, you can export current page records, selected or filtered records, show or hide specific columns, and adjust PDF formatting such as page size and orientation.

Export current page records

Exporting the current page enables you to generate a PDF containing only the visible page of grid records. To do this, set the exportType property in pdfExportProperties to CurrentPage.

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

app.component.ts
main.ts
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 selected records lets you generate a PDF that includes only specific Grid data items. This feature provides targeted, user-driven PDF exports.

To export selected records, set the exportProperties.dataSource property in the toolbarClick event.

Steps:

Handle the toolbarClick event of the Grid.
Retrieve selected records via getSelectedRecords.
Assign the selected data to exportProperties.dataSource.
Call pdfExport.

Example for exporting selected records:

app.component.ts
main.ts
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:

Apply the desired filter to the grid data.
Get the filtered data using the getFilteredRecords method.
Assign the filtered data to the exportProperties.dataSource property.
Trigger the export operation using the pdfExport method.

Example for exporting filtered records:

app.component.ts
main.ts
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

To include hidden columns in your exported PDF, set the includeHiddenColumn property as true in pdfExportProperties. This feature is useful if you need to output fields that are not currently displayed in the Grid UI.

Example for exporting hidden columns (e.g., ShipCity) that are not visible in the UI:

app.component.ts
main.ts
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 Grid enables columns to be shown or hidden dynamically during the export process.

How to:

Handle the toolbarClick event.
Update column visibility using the visible property (true to show, false to hide).
Run the export.
Use pdfExportComplete to restore the column visibility post-export.

In this example, the CustomerID column is hidden in the Grid, but shown during export, while ShipCity is hidden for the export:

app.component.ts
main.ts
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:

Handle the toolbarClick event of the Syncfusion Angular Grid.
Update the visibility of the desired columns by setting the visible property of the column to true or false.
Export the Syncfusion Angular Grid to PDF document using pdfExport method.
Handle the pdfExportComplete event to restore the column visibility to its original state.

Example: The ShipName column is hidden in the UI but shown for PDF export, while OrderDate is hidden in the export:

app.component.ts
main.ts
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

You can change the PDF page orientation by setting the pageOrientation property in pdfExportProperties.

Supported values:

Landscape: Exports Grid with landscape page orientation.
Portrait: Exports Grid with portrait page orientation (default).

Example for changing page orientation based on DropDownList value:

app.component.ts
main.ts
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

Page size for exported PDF documents can be changed by setting the pageSize property of pdfExportProperties to the required size.

Supported pdfPageSize values include:

Letter, Note, Legal
A0 to A9
B0 to 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.

app.component.ts
main.ts
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

To assign a specific file name to the exported PDF, set the fileName property of pdfExportProperties. This makes exported data easier to manage and identify.

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.

app.component.ts
main.ts
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.

app.component.ts
main.ts
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:

Access the pdfExportProperties.column of the Grid component.
Set the column object with attributes such as field, headerText, and textAlign to define the desired format.
Trigger the PDF export operation to apply the customized column settings.

Example: Customize the OrderID column’s text alignment, the CustomerID header text, and center-align the Freight column in the export output:

app.component.ts
main.ts
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

Text font and color used in the exported PDF document can be customized for Grid header, content, and caption cells.

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:

Access the pdfExportProperties of the Grid component.
Set the theme property to the desired default font.
Trigger the PDF export operation.

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

app.component.ts
main.ts
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

The Syncfusion Angular Grid can use a custom font in exported PDF documents by specifying a base64-encoded font string through pdfExportProperties.theme.

To use a custom font:

Encode the font file as a base64 string.
Assign this string to the export settings.

Example: Apply the base64 Algeria font to the exported grid (via the base64AlgeriaFont variable):

app.component.ts
main.ts
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 must receive font data in base64 format.

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.

app.component.ts
main.ts
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

Grid supports exporting data as a Blob instead of auto-downloading a file. Set the isBlob parameter to true in pdfExport. Use the pdfExportComplete event to consume the returned blob promise.

Example: Obtain exported grid blob data via the pdfExportComplete event:

app.component.ts
main.ts
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));

Search docs

Ask HelpBot