HelpBot Assistant

How can I help you?

PDF Export Options in Angular Grid Component

19 Mar 202624 minutes to read

The Syncfusion^® Angular Grid component provides the ability to customize PDF export options. This flexibility enables greater control over the exported content and layout to meet specific requirements.

The PDF export action can be customized using the pdfExportProperties property. The pdfExportProperties property enables exporting the current page records, selected records, or filtered records. Additionally, page alignments can be customized 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, set the exportType property to CurrentPage.

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

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

@Component({
    imports: [ GridModule],
    providers: [PdfExportService,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 enables generating PDF documents that include only the desired data. This feature provides the flexibility to export specific records that are relevant to specific needs, enabling more focused and targeted PDF exports.

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

Follow these steps to export the selected records from the Grid to a PDF file:

Handle the toolbarClick event of the Grid.
Retrieve the selected records using the getSelectedRecords method.
Assign the selected data to the exportProperties.dataSource property.
Trigger the export operation using the pdfExport method.

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

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FilterService, GridComponent, GridModule, PageService, PdfExportService, SelectionService, SelectionSettingsModel, ToolbarItems, ToolbarService } 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 enables generating PDF documents that include only the data matching applied filters. This feature is useful for exporting 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, 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.

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

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { FilterService, GridComponent, GridModule, PageService, PdfExportService, ToolbarItems, ToolbarService } 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 enables including hidden columns in the exported PDF document. This feature is useful when columns 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, set the includeHiddenColumn property to true in the pdfExportProperties property.

The following example demonstrates exporting hidden columns to a PDF file. In this example, the “Ship City” column, which is not visible in the UI, is exported to the PDF document. The grid can be exported by changing the pdfExportProperties.includeHiddenColumn property based on the switch toggle using the checked property of the EJ2 Toggle Switch Button component.

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { SwitchComponent,  ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule, } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@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 enables selective display or hiding of specific columns based on requirements.

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

Handle the toolbarClick event of the Grid component.
Update the visibility of the desired columns by setting the visible property of the column to true or false.
Export the grid to PDF.
Handle the pdfExportComplete event to restore the column visibility to its original state.

In the following example, the “Customer ID” is initially a hidden column in the grid. However, during the export process, the “Customer ID” column is made visible, while the “Ship City” column is hidden.

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

@Component({
    imports: [GridModule ],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true' (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 provides the ability 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 Grid, follow these steps:

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

In the following example, the “Ship Name” is initially a hidden column in the Grid. However, during the PDF export process, the “Ship Name” column is made visible, while the “Order Date” column is hidden:

app.component.ts
main.ts
import { data } from './datasource';
import { Component, ViewChild } from '@angular/core';
import { Column, ColumnModel, GridComponent, GridModule, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    providers: [ PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `
      <ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='250px' [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 provides the ability 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 specific needs.

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

The supported pageOrientation options are:

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

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

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

@Component({
    imports: [ GridModule, DropDownListAllModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `
    <div style="display: flex">
    <label style="padding: 5px 5px 5px 0"> Change the page orientation property: </label> 
    <ejs-dropdownlist
    #dropDownList
    index="0"
    width="100"
    [dataSource]="ddlData">
    </ejs-dropdownlist>
    </div>
    <ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='255px' [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 provides the ability to customize the page size of the exported PDF document according to 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, 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 exporting 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 { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { DropDownListAllModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { GridComponent, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@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 provides the ability to specify a custom file name for the exported PDF document. This feature enables providing 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, set the fileName property of the pdfExportProperties property to the desired file name.

The following example demonstrates defining 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 { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { TextBoxComponent, TextBoxModule } from '@syncfusion/ej2-angular-inputs';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@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 provides the ability 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 the exported PDF maintains its readability and comprehensiveness.

This can be achieved by utilizing the pdfExportProperties.allowHorizontalOverflow property of the grid.

The following example uses the EJ2 Toggle Switch Button component to enable or disable the pdfExportProperties.allowHorizontalOverflow property. Based on the switch state, the property is updated using the checked value, and the PDF export is performed when the toolbar is clicked.

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { SwitchComponent, ButtonModule, CheckBoxModule, RadioButtonModule, SwitchModule,} from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@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 provides the ability to customize the appearance of grid columns in exported PDF documents. This feature enables tailoring specific column attributes such as field, header text, and text alignment, ensuring that exported PDFs align perfectly with design and reporting requirements.

To customize the grid columns, 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.

The following example demonstrates customizing the grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: “Order ID” with textAlign set to Right, “Customer ID” with headerText as “Customer Name”, and “Freight” with textAlign set to Center, which is not rendered in the grid columns.

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

@Component({
    imports: [ GridModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=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 enables controlling the appearance and styling of the text in the exported file, ensuring consistency with the application’s design.

Default fonts

By default, the Grid uses the Helvetica font in the exported document. However, the default font can be changed by utilizing the pdfExportProperties.theme property. The available default fonts are:

Helvetica
TimesRoman
Courier
Symbol
ZapfDingbats

To change the default font, 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, changing the default font when exporting a document.

app.component.ts
main.ts
import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, GroupService, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
import { PdfFontFamily, PdfFontStyle, PdfStandardFont } 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='245px' [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 provides the ability 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 is 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 the usage of 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.

app.component.ts
main.ts
import { base64AlgeriaFont, data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { GridComponent, GridModule, GroupService, PdfExportProperties, PdfExportService, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
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='245px' [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, there is an option to conditionally format the cells in the exported PDF document. This enables customizing the appearance of specific cells based on their values or other criteria.

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

The following example demonstrates customizing 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 { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { Column, GridComponent, GridModule, PdfExportService, PdfQueryCellInfoEventArgs, PdfStyle, QueryCellInfoEventArgs, ToolbarItems, ToolbarService } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px'  [allowPdfExport]='true' 
                (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 obtaining the blob data of the exported grid by executing the promise in the pdfExportComplete event.

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

@Component({
    imports: [GridModule],
    providers: [PdfExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='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