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.

    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);
}

    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.