Exportador do Excel
O serviço Ignite UI for Angular Excel Exporter pode exportar dados no formato Microsoft® Excel® de dados brutos (matriz) ou dos componentes IgxGrid, IgxTreeGrid e IgxHierarchicalGrid. A funcionalidade de exportação é encapsulada na classe IgxExcelExporterService e os dados são exportados no formato de tabela do MS Excel. Este formato permite recursos como filtragem, classificação, etc.
Angular Excel Exporter Example
Usage
Para começar a usar o IgniteUI Excel Exporter, primeiro importe o IgxExcelExporterService arquivo app.module.ts e adicione o serviço à providers matriz:
// app.module.ts
...
import { IgxExcelExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
providers: [ IgxExcelExporterService ]
})
export class AppModule {}
Note
Na v12.2.1 e posterior, os serviços de exportador são fornecidos na raiz, o que significa que você não precisa mais declará-los nos provedores AppModule.
Para iniciar um processo de exportação, você pode usar o manipulador de um botão no modelo do seu componente.
<button (click)="exportButtonHandler()">Export Data to Excel</button>
Você pode acessar o serviço exportador definindo um argumento do tipo IgxExcelExporterService no construtor do componente e o framework Angular fornecerá uma instância do serviço. Para exportar alguns dados no formato MS Excel, você precisa invocar o método exportData do serviço exportador. Este método aceita como primeiro argumento os dados que você deseja exportar e o segundo argumento é do tipo IgxExcelExporterOptions e permite que você configure o processo de exportação.
Aqui está o código que executará o processo de exportação no arquivo datilografado do 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'));
}
Se tudo correr bem, você deverá ver um botão de exportação. Quando pressionado, ele acionará o processo de exportação e o navegador baixará um arquivo chamado "ExportedDataFile.xlsx" que contém os dados do array localData no formato MS Excel.
Customizing the Exported Content
Nos exemplos acima, o serviço Exportador do Excel estava exportando todos os dados disponíveis. Há situações em que você pode querer pular a exportação de uma linha ou até mesmo de uma coluna inteira. Para conseguir isso, você pode conectar os columnExporting eventos e/ou rowExporting que são disparados respectivamente para cada coluna e/ou cada linha e cancelar o respectivo evento definindo a propriedade do objeto de cancel argumento de evento como true.
O exemplo a seguir excluirá uma coluna da exportação se seu cabeçalho for "Idade" e se seu índice for 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
O serviço Exportador do Excel tem mais algumas APIs para explorar, listadas abaixo.
Exportadores de grades do Excel:
Componentes adicionais que foram usados:
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub