Angular Exportación de cuadrícula al servicio de Excel

    El servicio Excel Exporter puede exportar datos a Excel desde IgxGrid. La funcionalidad de exportación de datos está encapsulada en la clase IgxExcelExporterService y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrado, clasificación, etc. Para hacer esto, debe invocar el método export de IgxExcelExporterService y pasar el componente IgxGrid como primer argumento para exportar la cuadrícula fácilmente.

    Ejemplo de exportador de Excel Angular

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Exportar datos de Grid

    Para comenzar a usar IgniteUI Excel Exporter, primero importe IgxExcelExporterService en el archivo app.module.ts y agregue el servicio a la matriz providers:

    // app.module.ts
import { IgxExcelExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  providers: [ IgxExcelExporterService ]
})

export class AppModule {}
typescript

    En v12.2.1 y posteriores, los servicios de exportación se brindan en la raíz, lo que significa que ya no es necesario declararlos en los proveedores de AppModule.

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

    Puede acceder al servicio de exportador definiendo un argumento de tipo IgxExcelExporterService en el constructor del componente y el marco de Angular proporcionará una instancia del servicio. Para exportar algunos datos en formato MS Excel, debe invocar el método del servicio exportador export y pasar el componente IgxGrid como primer argumento.

    Aquí está el código que ejecutará el proceso de exportación en el archivo mecanografiado del componente:

    // component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
import { IgxGridComponent } from 'igniteui-angular';

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

constructor(private excelExportService: IgxExcelExporterService) {
}

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

    Si todo salió bien, deberías ver el componente IgxGrid y un botón debajo de él. Al presionar el botón, se activará el proceso de exportación y el navegador descargará un archivo llamado "ExportedDataFile.xlsx" que contiene los datos del componente Grid en formato MS Excel.

    Exportar todos los datos

    Hay algunos casos en los que es posible que esté utilizando operaciones remotas como paginación y Grid no tendrá acceso a todos sus datos. En estos casos, recomendamos utilizar el Servicio de exportación de Excel y pasar toda la recopilación de datos, si está disponible. Ejemplo:

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

    Exportar datos agrupados

    Para exportar datos agrupados solo necesita agrupar el Grid por una o más columnas. El navegador descargará un archivo llamado "ExportedDataFile.xlsx" que contiene los datos del componente Grid en formato MS Excel agrupados por la columna seleccionada. Ejemplo:

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    App Builder | CTA Banner

    Exportar cuadrícula de encabezados de varias columnas

    Ahora es posible exportar Grid con encabezados de varias columnas definidos. Todos los encabezados se reflejarán en el archivo de Excel exportado tal como se muestran en la cuadrícula. Si desea excluir los encabezados de varias columnas definidos de los datos exportados, puede configurar la opción del exportador ​ ​ignoreMultiColumnHeaders en true.

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

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    Exportar cuadrícula con encabezados de columna congelados

    De forma predeterminada, el servicio Excel Exporter exporta la cuadrícula con encabezados de columna desplazables (descongelados). Hay escenarios en los que es posible que desee congelar todos los encabezados encima del archivo de Excel exportado para que siempre permanezcan a la vista mientras el usuario se desplaza por los registros. Para lograr esto, puede configurar la opción del exportador ​ ​FreezeHeaders en true.

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

    Personalización del contenido exportado

    En los ejemplos anteriores, el servicio Exportador de Excel exportaba todos los datos disponibles. Hay situaciones en las que es posible que desee omitir la exportación de una fila o incluso de una columna completa. Para lograr esto, puede conectarse a los eventos columnExporting y/o rowExporting que se activan respectivamente para cada columna y/o cada fila y cancelar el evento respectivo estableciendo la propiedad cancel del objeto de argumento de evento en true.

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

    Cuando exporta datos desde el componente Grid, el proceso de exportación tiene en cuenta características como el filtrado de filas y la ocultación de columnas y exporta solo los datos visibles en el Grid. Puede configurar el servicio exportador para incluir filas filtradas o columnas ocultas estableciendo propiedades en el objeto IgxExcelExporterOptions.

    Limitaciones conocidas

    Limitación Descripción
    Tamaño máximo de hoja de trabajo El tamaño máximo de hoja de cálculo admitido por Excel es 1.048.576 filas por 16.384 columnas.
    Estilo celular El servicio de exportación de Excel no admite la exportación de un estilo personalizado aplicado a un componente de celda. En tales escenarios, recomendamos utilizar la Biblioteca de Excel.

    Referencias de API

    El servicio Excel Exporter tiene algunas API más para explorar, que se enumeran a continuación.

    Componentes adicionales que se utilizaron:

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.