Exportador de Excel
El servicio Ignite UI for Angular Excel Exporter puede exportar datos en formato Microsoft® Excel® desde datos en bruto (array) o desde los componentes IgxGrid, IgxTreeGrid e IgxHierarchicalGrid. La funcionalidad de exportación se encapsula en laIgxExcelExporterService clase y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrado, ordenación, etc.
Angular Excel Exporter Example
Usage
Para empezar a usar el Exportador de Excel de IgniteUI, primero importa elIgxExcelExporterService archivo en el archivo app.module.ts y añade el servicio alproviders array:
// app.module.ts
...
import { IgxExcelExporterService } from 'igniteui-angular/grids/core';
// 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.
<button (click)="exportButtonHandler()">Export Data to Excel</button>
Puedes acceder al servicio exportador definiendo un argumento de tipoIgxExcelExporterService en el constructor del componente y el marco de Angular proporcionará una instancia del servicio. Para exportar algunos datos en formato MS Excel necesitas invocar el método delexportData servicio exportador. Este método acepta como primer argumento los datos que quieres exportar y el segundo argumento es de tipoIgxExcelExporterOptions y te permite configurar el proceso de exportación.
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/grids/core';
// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
...
public localData = [
{ Name: 'Eric Ridley', Age: '26' },
{ Name: 'Alanis Brook', Age: '22' },
{ Name: 'Jonathan Morris', Age: '23' }
];
constructor(private excelExportService: IgxExcelExporterService) {
}
public exportButtonHandler() {
this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
Si todo ha ido bien, deberías ver un botón de exportación. Al pulsar, se activa el proceso de exportación y el navegador descarga un archivo llamado "ExportedDataFile.xlsx" que contiene los datos dellocalData array en formato MS Excel.
Customizing the Exported Content
En los ejemplos anteriores, el servicio Excel Exporter exportaba todos los datos disponibles. Hay situaciones en las que quizá quieras saltarte la exportación de una fila o incluso de toda una columna. Para lograr esto, puedes enganchar a loscolumnExporting eventos y/orowExporting eventos que se disparan respectivamente para cada columna y/o fila y cancelar el evento correspondiente estableciendo la propiedad delcancel objeto argumento del evento paratrue.
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.igxGrid1, new IgxExcelExporterOptions('ExportedDataFile'));
API References
El servicio Excel Exporter tiene algunas API más para explorar, que se enumeran a continuación.
Exportadores de Cuadrículas de Excel:
Componentes adicionales que se utilizaron:
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.
GitHub