Exportador de Excel
El servicio Ignite UI for Angular Excel Exporter puede exportar datos en formato Microsoft® Excel® desde datos sin procesar (matriz) o desde los componentes IgxGrid, IgxTreeGrid e IgxHierarchicalGrid. La funcionalidad de exportación está encapsulada en la clase IgxExcelExporterService y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrar, ordenar, etc.
Angular Excel Exporter Example
Usage
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.
<button (click)="exportButtonHandler()">Export Data 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 exportData del servicio exportador. Este método acepta como primer argumento los datos que deseas exportar y el segundo argumento es de tipo IgxExcelExporterOptions 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';
// 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 salió bien, deberías ver un botón de exportación. Cuando se presiona, se activará el proceso de exportación y el navegador descargará un archivo llamado "ExportedDataFile.xlsx" que contiene los datos de la matriz localData en formato MS Excel.
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.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