Angular Tree Grid Export to Excel and PDF Service

    Whether your audience needs a spreadsheet for deeper analysis or a polished PDF they can share right away, the Ignite UI exporters help you deliver the right file from the IgxTreeGrid in seconds. Inject the IgxExcelExporterService or IgxPdfExporterService, call the respective export/export method, and the component handles the rest—from honoring filters and sorting to shaping the output format.

    The sections below walk through setup, usage patterns, and tips for tailoring each export so that your users receive data that is ready to consume, no matter which file type they prefer.

    Ejemplo de exportador de Excel Angular

    This live example demonstrates the standard Excel and PDF export workflow for the Tree Grid—bound data, two export buttons (Excel and PDF), and the resulting .xlsx and .pdf files with preserved filtering and sorting state. Share it with stakeholders who want to preview the experience before wiring it into their application.

    Exportación de los datos de Tree Grid

    Getting the exporters into your project takes only a few lines of code. Follow these steps and you will have reusable services that can create either Excel or PDF outputs on demand:

    1. Import the IgxExcelExporterService and/or IgxPdfExporterService in your root module.
    2. Inject whichever exporter you need and call its export method when the user requests a file.
    // component.ts
import { IgxExcelExporterService, IgxPdfExporterService } from 'igniteui-angular/grids/core';
// import { IgxExcelExporterService, IgxPdfExporterService } from '@infragistics/igniteui-angular/grids/core'; for licensed package

...

private excelExportService = inject(IgxExcelExporterService);
private pdfExportService = inject(IgxPdfExporterService);
    Nota

    In v12.2.1 and later, IgxExcelExporterService is provided in root and does not need to be registered in the providers array. The PDF exporter was introduced in later versions and is available as an injectable service without any additional configuration.

    Para iniciar un proceso de exportación, puede utilizar el controlador de un botón en la plantilla de su componente.

    <igx-tree-grid #treeGrid [data]="localData" [autoGenerate]="true"></igx-tree-grid>
<button (click)="exportButtonHandler()">Export IgxTreeGrid to Excel</button>
<button (click)="exportPdfButtonHandler()">Export IgxTreeGrid to PDF</button>

    You may access either exporter service by defining it as a constructor dependency and letting Angular provide an instance. Calling the shared export method initiates the download while automatically respecting the component state, selected rows, and formatting rules.

    Here is the code which will execute both export processes in the component's typescript file:

    // component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions, IgxPdfExporterService, IgxPdfExporterOptions } from 'igniteui-angular/grids/core';
import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid';

@ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;

private excelExportService = inject(IgxExcelExporterService);
private pdfExportService = inject(IgxPdfExporterService);

public exportButtonHandler() {
  this.excelExportService.export(this.treeGrid, new IgxExcelExporterOptions('ExportedDataFile'));
}

public exportPdfButtonHandler() {
  this.pdfExportService.export(this.treeGrid, new IgxPdfExporterOptions('ExportedDataFile'));
}

    Once wired up, pressing the respective buttons downloads files named ExportedDataFile.xlsx or ExportedDataFile.pdf populated with the current Tree Grid view. You can swap in customer-friendly file names, append timestamps, or surface a success toast so users know their export has completed.

    Exportar todos los datos

    Large, remote datasets often load page-by-page or on demand, which means the Tree Grid might not have every record available when the user clicks Export. To guarantee a complete workbook, hydrate the exporter with the full data collection before starting the process. The exportData helper bypasses the component and works directly against plain objects, so you can reuse the same routine for scheduled exports or admin-only downloads.

    public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
    Tip

    When offering PDF downloads for remote data, consider fetching the complete dataset first and then calling export so the document mirrors the user's expectations.

    Exportar cuadrícula de encabezados de varias columnas

    Dashboards often rely on multi-column headers to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the exporter option ignoreMultiColumnHeaders flag to true and the output will include only the leaf headers.

    Nota

    La cuadrícula de árbol exportada no tendrá formato de tabla, ya que las tablas de Excel no admiten encabezados de filas múltiples.

    Exportar cuadrícula con encabezados de columna congelados

    Long sheets can become hard to read once the header row scrolls out of view. Enabling frozen headers keeps key context—like "Customer" or "Invoice Total"—visible at the top of the worksheet while your users explore the data further down. Toggle the exporter option freezeHeaders flag to true before calling export and the service will handle the rest.

    public exportButtonHandler() {
    const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
    exporterOptions.freezeHeaders = true;
    this.excelExportService.export(this.grid, exporterOptions);
}

    PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file.

    Personalización del contenido exportado

    Most teams tailor exports before sharing them: hiding internal-use columns, renaming headers, or skipping rows that only apply to administrators. Both exporter services expose events that let you intercept every row or column and decide how it should appear in the file. Subscribe to columnExporting and rowExporting to make last-minute adjustments—set cancel = true to omit an item or tweak the event arguments to update values on the fly.

    El siguiente ejemplo excluirá una columna de la exportación si su encabezado es "Edad" y si su índice es 1:

    // component.ts

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

    When you are exporting data from the Tree Grid component, the services automatically respect sorting, filtering, summaries, and hidden columns so the file reflects what the user currently sees. Need the full dataset instead? Toggle the relevant flags on IgxExcelExporterOptions or IgxPdfExporterOptions to include filtered rows, hidden columns, or custom metadata.

    Limitaciones conocidas

    Before shipping exports to production users, review the following platform constraints so you can set expectations and provide helpful guidance within your app.

    Limitación Descripción
    Niveles de jerarquía The exporter supports up to 8 levels of hierarchy. If you need deeper structures, flatten the data or export subsets to keep the file readable.
    Tamaño máximo de hoja de trabajo The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns. Consider slicing extremely large exports by date range or segment to stay within these limits.
    Estilo celular The Excel exporter service does not support exporting a custom style applied directly to a cell component. In such scenarios we recommend using the richer Excel Library for fine-grained formatting.
    Wide PDF layouts Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.

    Referencias de API

    The Excel and PDF Exporter services have a few more APIs to explore, which are listed below.

    Componentes adicionales que se utilizaron:

    Recursos adicionales

    Our community is active and always welcoming to new ideas. The links below connect you with samples, community answers, and the engineering team.