Angular Exportación de cuadrícula de árbol a Excel y servicio PDF

    Ya sea que tu audiencia necesite una hoja de cálculo para un análisis más profundo o un PDF pulido que puedan compartir de inmediato, los exportadores Ignite UI te ayudan a entregar el archivo correcto desde IgxTreeGrid en segundos. Inyecta elIgxExcelExporterService oIgxPdfExporterService, llama al respectivoexport /export método, y el componente se encarga del resto—desde respetar filtros y ordenar hasta dar forma al formato de salida.

    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.

    Ejemplo de exportador de Excel Angular

    Este ejemplo en vivo demuestra el flujo de trabajo estándar de exportación de Excel y PDF para la Tree Grid: datos enlazados, dos botones de exportación (Excel y PDF) y los archivos resultantes.xlsx​.pdf con el estado de filtrado y ordenación preservados. Compártelo con los interesados que quieran adelantar la experiencia antes de integrarla en su aplicación.

    Exportación de los datos de Tree Grid

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

    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-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>

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

    Una vez conectado, pulsar los botones correspondientes descarga archivos nombradosExportedDataFile.xlsx oExportedDataFile.pdf rellenados con la vista actual de la Cuadrícula del Árbol. Puedes cambiar nombres de archivo amigables para el cliente, añadir marcas de tiempo o mostrar un toast de éxito para que los usuarios sepan que su exportación ha finalizado.

    Exportar todos los datos

    Los grandes conjuntos de datos remotos suelen cargarse página por página o bajo demanda, lo que significa que la Cuadrícula de Árbol puede no tener todos los registros disponibles cuando el usuario haga clic en Exportar. Para garantizar un libro de trabajo completo, hidrata al exportador con la recopilación completa de datos antes de comenzar el proceso. ElexportData asistente evita el componente y funciona directamente contra objetos simples, así que puedes reutilizar la misma rutina para exportaciones programadas o descargas solo de administrador.

    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.

    Exportar cuadrícula de encabezados de varias columnas

    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.

    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

    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.

    Personalización del contenido exportado

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

    Cuando exportas datos desde el componente Tree Grid, los servicios respetan automáticamente la ordenación, filtrado, resúmenes y columnas ocultas para que el archivo refleje lo que el usuario ve actualmente. ¿Necesitas el conjunto de datos completo en su lugar? Activa o incluye filas filtradas, columnas ocultas o metadatos personalizados, las queIgxExcelExporterOptions se activan lasIgxPdfExporterOptions banderas relevantes.

    Limitaciones conocidas

    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.
    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.

    Referencias de API

    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:

    Recursos adicionales

    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.