Servicio de exportación de cuadrícula Angular a 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.
Angular Excel Exporter Example
Exporting Grid's Data
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 {}
Note
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>
Puede acceder al servicio exportador definiendo un argumento de tipo IgxExcelExporterService en el constructor del componente y el marco Angular proporcionará una instancia del servicio. Para exportar algunos datos en formato MS Excel, debe invocar el método export del servicio exportador 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'));
}
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.
Export All Data
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'));
}
Export Grouped Data
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:
Export Multi Column Headers Grid
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.
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
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);
}
Customizing the Exported Content
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'));
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.
Known Limitations
| 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. |
API References
El servicio Excel Exporter tiene algunas API más para explorar, que se enumeran a continuación.
Componentes adicionales que se utilizaron:
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub