Angular Hierarchical Grid Export to Excel and PDF Service

    The Ignite UI Excel and PDF Exporter services treat the IgxHierarchicalGrid exactly like your users see it on screen—complete with hierarchical layouts and summaries. Inject the IgxExcelExporterService or IgxPdfExporterService, call the appropriate export/export method, and let the service generate the final document.

    Las secciones siguientes explican la configuración, los patrones de uso y consejos para adaptar cada exportación de modo que tus usuarios reciban datos listos para consumir, sin importar el tipo de archivo que prefieran.

    Angular Excel Exporter Example

    This live example demonstrates the standard Excel and PDF export workflow for the Hierarchical 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.

    Exporting Hierarchical Grid's Data

    Meter los exportadores en tu proyecto requiere solo unas pocas líneas de código. Sigue estos pasos y tendrás servicios reutilizables que pueden crear salidas en Excel o PDF bajo demanda:

    1. Importa elIgxExcelExporterService and/oIgxPdfExporterService en tu módulo raíz.
    2. Inyecta el exportador que necesites y llama a suexport método cuando el usuario solicite un archivo.
    // 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);
    Note

    En la v12.2.1 y posteriores,IgxExcelExporterService se proporciona en la raíz y no necesita registrarse en elproviders array. El exportador de PDF se introdujo en versiones posteriores y está disponible como un servicio inyectable sin ninguna configuración adicional.

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

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

    Puedes acceder a cualquiera de los servicios exportadores definiéndolo como una dependencia del constructor y dejando que Angular proporcione una instancia. Llamar al método compartidoexport inicia la descarga respetando automáticamente el estado del componente, las filas seleccionadas y las reglas de formato.

    Aquí está el código que ejecutará ambos procesos de exportación en el archivo typescript del componente:

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

@ViewChild('hierarchicalGrid') public hierarchicalGrid: IgxHierarchicalGridComponent;

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

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

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

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

    Export All Data

    Large, remote datasets often load page-by-page or on demand, which means the Hierarchical 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

    Al ofrecer descargas en PDF para datos remotos, considera obtener primero el conjunto de datos completo y luego llamarexport para que el documento refleje las expectativas del usuario.

    Export Multi Column Headers Grid

    Los paneles suelen depender de cabeceras de varias columnas para añadir contexto—piensa en una banda "Q1/Q2/Q3" sobre las columnas individuales del mes. El exportador refleja esta estructura para que los usuarios de hojas de cálculo entiendan inmediatamente la lógica de agrupación. Si tu flujo de trabajo aguas abajo prefiere nombres de columnas simples, invierte el Opción exportadora ignoreMulticolumnHeaders flag totrue y la salida incluirá solo los encabezados de hojas.

    Note

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

    Note

    El estado de expansión exportado de los encabezados de varias columnas en las islas de fila siempre estará en su estado inicial.

    Export Grid with Frozen Column Headers

    Las hojas largas pueden volverse difíciles de leer una vez que la fila de cabecera desaparece de la vista. Activar cabeceras congeladas mantiene visible el contexto clave —como "Cliente" o "Total de la factura"— en la parte superior de la hoja de cálculo mientras tus usuarios exploran los datos más abajo. Alterna la Opción exportadora FreezeHeaders Marca antestrue de llamarexport y el servicio se encargará del resto.

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

    Las exportaciones PDF incluyen automáticamente la fila de cabecera de columna en la parte superior del documento, de modo que los lectores conservan el mismo contexto al abrir o imprimir el archivo.

    Customizing the Exported Content

    La mayoría de los equipos adaptan las exportaciones antes de compartirlas: ocultando columnas de uso interno, renombrando encabezados o saltando filas que solo se aplican a los administradores. Ambos servicios exportadores exponen eventos que te permiten interceptar cada fila o columna y decidir cómo debe aparecer en el archivo. Suscribirse ycolumnExporting​rowExporting hacer ajustes de última hora: configurarcancel = true para omitir un elemento o modificar los argumentos del evento para actualizar los valores sobre la marcha.

    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.hierarchicalGrid, new IgxExcelExporterOptions('ExportedDataFile'));

    When you are exporting data from the Hierarchical 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.

    Known Limitations

    Antes de enviar exportaciones a usuarios de producción, revisa las siguientes restricciones de la plataforma para poder establecer expectativas y ofrecer una orientación útil dentro de tu app.

    Limitación Descripción
    Niveles de jerarquía El exportador soporta hasta 8 niveles de jerarquía. Si necesitas estructuras más profundas, aplana los datos o exporta subconjuntos para mantener el archivo legible.
    Tamaño máximo de hoja de trabajo El tamaño máximo de hoja de cálculo soportado por Excel es de 1.048.576 filas por 16.384 columnas. Considera segmentar exportaciones extremadamente grandes por rango de fechas o segmento para mantenerte dentro de estos límites.
    Exportar columnas fijadas In the exported Excel file, pinned columns are not frozen but preserve their order. If freezing is critical, adjust the sheet manually after export.
    Estilo celular El servicio exportador de Excel no soporta exportar un estilo personalizado aplicado directamente a un componente de celda. En estos escenarios, recomendamos usar la biblioteca Excel más rica para un formato de grano fino.
    Formatos PDF amplios Las cuadrículas muy anchas pueden forzar que las columnas del PDF se reduzcan para ajustarse a la página. Aplica anchos de columna o oculta campos de baja prioridad antes de exportar para mantener el documento legible.

    API References

    Los servicios de Excel y PDF Exporter tienen algunas APIs más por explorar, que se enumeran a continuación.

    Componentes adicionales que se utilizaron:

    Additional Resources

    Nuestra comunidad está activa y siempre acogida a nuevas ideas. Los enlaces a continuación te conectan con muestras, respuestas de la comunidad y el equipo de ingeniería.