PDF Exporter

    The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as IgxGrid, IgxTreeGrid, IgxHierarchicalGrid, and IgxPivotGrid. The exporting functionality is encapsulated in the IgxPdfExporterService class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options.

    Angular PDF Exporter Example

    Usage

    To start using the Ignite UI PDF Exporter, first import the IgxPdfExporterService into your component:

    import { IgxPdfExporterService } from 'igniteui-angular/grids/core';

// import { IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

@Component({
  ...
})
export class AppComponent { ... }

    To initiate an export process, you can use a button click handler in your component's template.

    <button (click)="exportButtonHandler()">Export Data to PDF</button>

    You can access the IgxPdfExporterService by using the inject function. To export data in PDF format, you need to invoke the exporter service's exportData method. This method accepts the data you want to export as its first argument, and an IgxPdfExporterOptions instance as its second argument, which allows you to configure the export process.

    Here is the code that will execute the export process in the component's TypeScript file:

    // component.ts

...
import { Component, inject, signal } from '@angular/core';
import { IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';

// import { IgxPdfExporterService, IgxPdfExporterOptions } from '@infragistics/igniteui-angular/grids/core'; for licensed package
...

public localData = signal([
  { Name: 'Eric Ridley', Age: '26' },
  { Name: 'Alanis Brook', Age: '22' },
  { Name: 'Jonathan Morris', Age: '23' }
]);

private pdfExportService = inject(IgxPdfExporterService);

public exportButtonHandler() {
  this.pdfExportService.exportData(this.localData, new IgxPdfExporterOptions('ExportedDataFile'));
}

    If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.pdf" which contains the data from the localData array in PDF format.

    Customizing the Exported Content

    In the above examples, the PDF Exporter service exports all available data. However, there are situations where you may want to skip exporting a row or an entire column. To achieve this, you can subscribe to the columnExporting and/or rowExporting events, which are fired for each column and/or each row respectively. You can then cancel the export by setting the event argument object's cancel property to true.

    The following example excludes a column from the export if its header is "Age" and its index is 1:

    // component.ts

this.pdfExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.pdfExportService.export(this.igxGrid1, new IgxPdfExporterOptions('ExportedDataFile'));

    PDF Export Options

    The IgxPdfExporterOptions class provides several properties to customize the PDF export:

    • pageOrientation: Specifies the page orientation (portrait or landscape). Default is landscape.
    • pageSize: Specifies the page size (a3, a4, a5, letter, legal, etc.). Default is a4.
    • showTableBorders: Determines whether to display table borders. Default is true.
    • fontSize: Sets the font size for the table content. Default is 10.
    • customFont: Specifies a custom TrueType font (TTF) for Unicode character support. Required when exporting data containing non-Latin characters.

    The following example demonstrates how to configure these options:

    // component.ts

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.pageOrientation = 'portrait';
  options.pageSize = 'letter';
  options.showTableBorders = true;
  options.fontSize = 12;

  this.pdfExportService.exportData(this.localData, options);
}

    Custom Font Configuration for Unicode Support

    By default, the PDF exporter uses the built-in Helvetica font, which only supports basic Latin characters. If your data contains non-Latin characters (such as Cyrillic, Chinese, Japanese, Arabic, Hebrew, or special symbols), you must provide a custom TrueType font (TTF) using the customFont property.

    The font data must be provided as a Base64-encoded string of the TTF file contents. You can optionally provide a separate bold variant for header styling.

    Converting TTF Files to Base64

    To convert a TTF file to Base64, use Node.js:

    const fs = require('fs');
const fontData = fs.readFileSync('path/to/font.ttf');
const base64 = fontData.toString('base64');
fs.writeFileSync('font-base64.ts', `export const MY_FONT = '${base64}';`);

    Alternatively, you can use an online Base64 encoder tool to convert your TTF file.

    Example: Basic Custom Font Usage

    // fonts/noto-sans.ts
export const NOTO_SANS_REGULAR = 'AAEAAAATAQAABAAwR0...[base64-encoded font data]...';

// component.ts
import { NOTO_SANS_REGULAR } from './fonts/noto-sans';

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.customFont = {
    name: 'NotoSans',
    data: NOTO_SANS_REGULAR
  };

  this.pdfExportService.exportData(this.localData, options);
}

    Example: Custom Font with Bold Variant

    // fonts/noto-sans.ts
export const NOTO_SANS_REGULAR = 'AAEAAAATAQAABAAwR0...[base64-encoded regular font]...';
export const NOTO_SANS_BOLD = 'BBFAAAAUBQAACAAxS1...[base64-encoded bold font]...';

// component.ts
import { NOTO_SANS_REGULAR, NOTO_SANS_BOLD } from './fonts/noto-sans';

public exportButtonHandler() {
  const options = new IgxPdfExporterOptions('ExportedDataFile');
  options.customFont = {
    name: 'NotoSans',
    data: NOTO_SANS_REGULAR,
    bold: {
      name: 'NotoSans-Bold',
      data: NOTO_SANS_BOLD
    }
  };

  this.pdfExportService.export(this.igxGrid1, options);
}

    The following fonts provide excellent Unicode coverage:

    • Noto Sans: Covers most Unicode scripts — Google Fonts
    • Arial Unicode MS: Comprehensive Unicode character support
    • Source Han Sans: Excellent CJK (Chinese, Japanese, Korean) support

    Demo

    Known Limitations

    Limitation Description
    Wide PDF layouts Very wide grids can force PDF columns to shrink to fit the page. Apply explicit column widths or hide low‑priority fields before exporting to keep the document legible.

    API References

    The PDF Exporter service has a few more APIs to explore, which are listed below.

    Additional components that were used:

    Additional Resources

    Our community is active and always welcoming to new ideas.