Exportador do Excel
O serviço Ignite UI for Angular Excel Exporter pode exportar dados no formato Microsoft®® Excel a partir de dados brutos (array) ou dos componentes IgxGrid, IgxTreeGrid e IgxHierarchicalGrid. A funcionalidade de exportação está encapsulada naIgxExcelExporterService classe e os dados são exportados no formato de tabela do MS Excel. Esse formato permite recursos como filtragem, ordenação, etc.
Angular Excel Exporter Example
Usage
Para começar a usar o IgniteUI Excel Exporter, primeiro importe oIgxExcelExporterService arquivo no app.module.ts e adicione o serviço aoproviders 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
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 de tipoIgxExcelExporterService 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 doexportData serviço exportador. Esse método aceita como primeiro argumento os dados que você deseja exportar e o segundo argumento é do tipoIgxExcelExporterOptions, permitindo configurar 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/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'));
}
Se tudo correu bem, você deve ver um botão de exportação. Quando pressionado, ele aciona o processo de exportação e o navegador baixa um arquivo chamado "ExportedDataFile.xlsx" que contém os dados dolocalData array no formato MS Excel.
Customizing the Exported Content
Nos exemplos acima, o serviço Excel Exporter estava exportando todos os dados disponíveis. Existem situações em que você pode querer pular a exportação de uma linha ou até mesmo de uma coluna inteira. Para isso, você pode acoplar aoscolumnExporting eventos e/ourowExporting que são disparados respectivamente para cada coluna e/ou cada linha e cancelar o evento respectivo definindo a propriedade docancel objeto argumento do evento paratrue.
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