Angular

Introduction

System Requirements

Browser Compatibility

NPM Packages

API Reference

Release Notes

Getting Started

Installation and Upgrade

Upgrade

Licensing

Appearance

Common

Frameworks and Feature

Visual Studio Code Integration

Visual Studio Integration

Accordion

Accumulation Chart

AppBar

AutoComplete

Avatar

Badge

Barcode

Breadcrumb

Bullet Chart

Button

ButtonGroup

Calendar

Card

Carousel

Chart

CheckBox

Chips

Circular Gauge

ColorPicker

ComboBox

ContextMenu

Dashboard Layout

DataManager

DatePicker

DateRangePicker

DateTimePicker

Diagram

Dialog

DocumentEditor

DropDownButton

DropDownList

Dropdown Tree

FileManager

FloatingActionButton

Gantt

Grid

HeatMap Chart

Image Editor

In-place Editor

Kanban

Linear Gauge

ListBox

ListView

Maps

MaskedTextBox

Mention

Menu Bar

Message

MultiSelect

NumericTextBox

Pager

PDF Viewer

Pivot Table

Predefined Dialogs

ProgressBar

ProgressButton

QueryBuilder

RadioButton

Range Navigator

Range Slider

RichTextEditor

Schedule

Sidebar

Signature

Skeleton

Smith Chart

Sparkline

SpeedDial

Spinner

SplitButton

Splitter

Spreadsheet

Stock Chart

Toggle Switch Button

Tabs

TextBox

TimePicker

Toast

Toolbar

Tooltip

Tree Grid

TreeMap

TreeView

Uploader

/ Grid / Pdf Export / PDF Export Options

Search results

PDF Export Options in Angular Grid component

21 Dec 2022 / 10 minutes to read

Export current page

PDF export provides an option to export the current page into PDF. To export current page, define the exportType to CurrentPage.

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

@Component({
    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=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    providers: [PageService]
})
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.pdfExport(pdfExportProperties);
        }
    }
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Export the selected records only

You can export the selected records data by passing it to exportProperties.dataSource Property in the toolbarClick event.

In the below exporting demo, We can get the selected records using getSelectedRecords method and pass the selected data to PdfExport or excelExport property.

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

@Component({
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions'
   [allowPaging]='true' [allowPdfExport]='true' [allowExcelExport]='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>`,
    providers: [ToolbarService, PdfExportService, PageService, FilterService, ExcelExportService]
})
export class AppComponent implements OnInit {

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

    toolbarClick(args: ClickEventArgs) {
        if (args.item.id === 'Grid_pdfexport') {
            const selectedRecords = this.grid.getSelectedRecords();
            const exportProperties = {
                dataSource: selectedRecords
            };
            this.grid.pdfExport(exportProperties);
        } else if (args.item.id === 'Grid_excelexport') {
            const selectedRecords = this.grid.getSelectedRecords();
            const exportProperties = {
                dataSource: selectedRecords
            };
            this.grid.excelExport(exportProperties);
        }
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FreezeService, SelectionService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FreezeService, SelectionService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Export filtered data only

You can export the filtered data by defining the resulted data in exportProperties.dataSource before export.

In the below Pdf exporting demo, We have gotten the filtered data by applying filter query to the grid data and then defines the resulted data in exportProperties.dataSource and pass it to pdfExport method.

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

@Component({
  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=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>`,
  providers: [ToolbarService, PdfExportService, PageService, FilterService]
})
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') {
      let pdfdata;
      const query = this.grid.renderModule.data.generateQuery(); // get grid corresponding query
      for (let i = 0; i < query.queries.length; i++) {
        if (query.queries[i].fn === 'onPage') {
          query.queries.splice(i, 1);       // remove page query to get all records
          break;
        }
      }
      const fdata = new DataManager({ json: data }).executeQuery(query).then((e: any) => {
        pdfdata = e.result as object[];  // get all filtered records
        const exportProperties = {
          dataSource: pdfdata,
        };
        this.grid.pdfExport(exportProperties);
      }).catch((e) => true);
    }
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, FreezeService, SelectionService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [FreezeService, SelectionService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Export hidden columns

PDF export provides an option to export hidden columns of Grid by defining the includeHiddenColumn as true.

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({
    selector: 'app-root',
    template: `<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=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false'  width=150></e-column>
                    <e-column field='ShipCountry' headerText='ShipCountry' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const pdfExportProperties: PdfExportProperties = {
                includeHiddenColumn: true
            };
            this.grid.pdfExport(pdfExportProperties);
        }
    }
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Show or hide columns

You can show a hidden column or hide a visible column while exporting the grid using toolbarClick and pdfExportComplete events.

In the toolbarClick event, based on args.item.id as Grid_pdfexport. We can show or hide columns by setting column.visible property to true or false respectively.

In the pdfExportComplete event, We have reversed the state back to the previous state.

In the below example, we have CustomerID as a hidden column in the grid. While exporting, we have changed CustomerID to visible column and ShipCity as hidden column.

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({
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true'
    [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=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipCountry' headerText='ShipCountry' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') {
            (this.grid.columns[1] as Column).visible = true;
            (this.grid.columns[2] as Column ).visible = false;
            this.grid.pdfExport();
        }
    }

    pdfExportComplete(): void {
        (this.grid.columns[1] as Column).visible = false;
        (this.grid.columns[2] as Column).visible = true;
    }
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Change page orientation

Page orientation can be changed Landscape(Default Portrait) for the exported document using the pdfExportProperties.

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({
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' [toolbar]='toolbarOptions'
               height='220px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const pdfExportProperties: PdfExportProperties = {
                pageOrientation: 'Landscape',
            };
            this.grid.pdfExport(pdfExportProperties);
        }
    }
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Change page size

Page size can be customized for the exported document using the pdfExportProperties.

Supported page sizes are:

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

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({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' [toolbar]='toolbarOptions'
          height='220px' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
            </ejs-grid>`
})
export class AppComponent implements OnInit {

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

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

toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_pdfexport') { // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
        const pdfExportProperties: PdfExportProperties = {
            pageSize: 'Letter'
        };
        this.grid.pdfExport(pdfExportProperties);
    }
}
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Define file name

You can assign the file name for the exported document by defining fileName property in PdfExportProperties.

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

@Component({
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=120></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
            </e-columns>
            </ejs-grid>`,
providers: [PageService]
})
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 = {
            fileName: 'new.pdf'
        };
        this.grid.pdfExport(pdfExportProperties);
    }
}
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Font customization

Default fonts

By default, grid uses Helvetica font in the exported document. You can change the default font by using pdfExportProperties.theme property. The available default fonts are,

Helvetica
TimesRoman
Courier
Symbol
ZapfDingbats

The code example for changing default font,

import { PdfStandardFont, PdfFontFamily, PdfFontStyle } from '@syncfusion/ej2-pdf-export';

...

const pdfExportProperties: PdfExportProperties = {
    theme: {
        header: {font:  new PdfStandardFont(PdfFontFamily.TimesRoman, 11, PdfFontStyle.Bold),
        caption: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 9) },
        record: { font: new PdfStandardFont(PdfFontFamily.TimesRoman, 10) }
    }
};

Add custom font

You can change the default font of Grid header, content and caption cells in the exported document by using pdfExportProperties.theme property.

In the following example, we have used Algeria font to export the grid.

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

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

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

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

toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_pdfexport') {
        const pdfExportProperties: PdfExportProperties = {
            theme: {
                header: { font: new PdfTrueTypeFont(base64AlgeriaFont, 12) },
                caption: { font: new PdfTrueTypeFont(base64AlgeriaFont, 10) },
                record: { font: new PdfTrueTypeFont(base64AlgeriaFont, 9) }
            }
        };
        this.grid.pdfExport(pdfExportProperties);
    }
}
}

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

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        GridModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [PdfExportService, ToolbarService]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

PdfTrueTypeFont accepts base 64 format of the Custom Font.

Grid / Export Multiple Grids

Grid / PDF Cell Style Customization

Contents

Export current page
Export the selected records only
Export filtered data only
Export hidden columns
Show or hide columns
Change page orientation
Change page size
Define file name
Font customization
Default fonts
Add custom font