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

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

    Once wired up, pressing the respective buttons downloads files named ExportedDataFile.xlsx or ExportedDataFile.pdf populated with the current 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 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 Grouped Data

    Grouping is a popular way to summarize customer segments, product categories, or financial periods before sharing the results. The exporter preserves the exact grouping hierarchy that is currently applied to the Grid, so your recipients see the same breakdown you do in the browser. Simply group by one or more columns and trigger the export—no extra configuration is required.

    If you need flat data in the exported file, clear the grouping prior to calling export or handle the rowExporting event to reshape the output.

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

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