Angular Exportación en cuadrícula a Excel y servicio PDF

    Tanto si tu audiencia necesita una hoja de cálculo para un análisis más profundo como un PDF pulido que puedan compartir de inmediato, los exportadores de Ignite UI te ayudan a entregar el archivo correcto desde IgxGrid 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.

    Angular Excel Exporter Example

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

    Exporting 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-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>
<button (click)="exportPdfButtonHandler()">Export IgxGrid 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 { IgxGridComponent } from 'igniteui-angular/grids/grid';

@ViewChild('grid') public grid: IgxGridComponent;

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

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

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

    Una vez conectado, al pulsar los botones correspondientes se descargan archivos nombradosExportedDataFile.xlsx oExportedDataFile.pdf que se rellenan con la vista actual de la cuadrícula. 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.

    Export All Data

    Los grandes conjuntos de datos remotos suelen cargarse página por página o bajo demanda, lo que significa que la Grid puede no tener todos los registros disponibles cuando el usuario pulsa 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.

    Export Grouped Data

    Agrupar es una forma popular de resumir segmentos de clientes, categorías de productos o periodos financieros antes de compartir los resultados. El exportador conserva la jerarquía exacta de agrupación que se aplica actualmente a la Grid, así que tus destinatarios ven la misma desglose que tú en el navegador. Simplemente agrupa por una o más columnas y activa la exportación, sin necesidad de configuración adicional.

    Si necesitas datos planos en el archivo exportado, borra el agrupamiento antes de llamarexport o maneja elrowExporting evento para remodelar la salida.

    Ejemplo:

    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 exportada no tendrá formato de tabla, ya que las tablas de Excel no admiten encabezados de filas múltiples.

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

    Cuando exportas datos desde el componente Grid, los servicios respetan automáticamente la ordenación, el filtrado, los resúmenes y las 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.

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

    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.