Angular Exportação de grade para o serviço do Excel
O serviço Excel Exporter pode exportar dados para o Excel a partir do IgxGrid. A funcionalidade de exportação de dados é encapsulada IgxExcelExporterService na classe e os dados são exportados no formato de tabela do MS Excel. Este formato permite recursos como filtragem, classificação, etc. Para fazer isso, você precisa invocar o IgxExcelExporterService método e export passar o componente IgxGrid como primeiro argumento para exportar grid facilmente.
Angular Excel Exporter Example
Exporting Grid's Data
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.
<igx-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>
Você pode acessar o serviço exportador definindo um argumento do tipo IgxExcelExporterService no construtor do componente e a estrutura Angular fornecerá uma instância do serviço. Para exportar alguns dados no formato MS Excel, você precisa invocar o método do export serviço exportador e passar o componente IgxGrid como primeiro argumento.
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 { IgxGridComponent } from 'igniteui-angular';
@ViewChild('grid') public grid: IgxGridComponent;
constructor(private excelExportService: IgxExcelExporterService) {
}
public exportButtonHandler() {
this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
}
Se tudo correr bem, você deverá ver o componente IgxGrid e um botão abaixo dele. Ao pressionar o botão, ele acionará o processo de exportação e o navegador fará o download de um arquivo chamado "ExportedDataFile.xlsx" que contém os dados do componente Grid no formato MS Excel.
Export All Data
Há alguns casos em que você pode estar usando operações remotas como paginação e a grade não terá acesso a todos os seus dados. Nesses casos, recomendamos usar o Serviço de Exportação do Excel e passar toda a coleta de dados, se disponível. Exemplo:
public exportButtonHandler() {
this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
Export Grouped Data
Para exportar dados agrupados, basta agrupar a Grid por uma ou mais colunas. O navegador fará o download de um arquivo chamado "ExportedDataFile.xlsx" que contém os dados do componente Grid no formato MS Excel agrupados pela coluna selecionada. Exemplo:
Export Multi Column Headers Grid
Agora é possível exportar Grid com cabeçalhos de várias colunas definidos. Todos os cabeçalhos serão refletidos no arquivo Excel exportado à medida que são exibidos na Grade. Se você quiser excluir os cabeçalhos de várias colunas definidos dos dados exportados, poderá definir o Opção de exportador ignoreMultiColumnHeaders para true.
Note
A Grid exportada não será formatada como uma tabela, pois as tabelas do Excel não oferecem suporte a vários cabeçalhos de linha.
Export Grid with Frozen Column Headers
Por padrão, o serviço Exportador do Excel exporta a grade com cabeçalhos de coluna roláveis (descongelados). Há cenários em que você pode querer congelar todos os cabeçalhos na parte superior do arquivo Excel exportado para que eles sempre permaneçam à vista enquanto o usuário percorre os registros. Para conseguir isso, você pode definir o Opção de exportador freezeHeaders para true.
public exportButtonHandler() {
const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
exporterOptions.freezeHeaders = true;
this.excelExportService.export(this.grid, exporterOptions);
}
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.grid, new IgxExcelExporterOptions('ExportedDataFile'));
Quando você está exportando dados do componente Grid, o processo de exportação leva em conta recursos como filtragem de linha e ocultação de coluna e exporta apenas os dados visíveis no Grid. Você pode configurar o serviço de exportador para incluir linhas filtradas ou colunas ocultas definindo propriedades no IgxExcelExporterOptions objeto.
Known Limitations
| Limitação | Descrição |
|---|---|
| Tamanho máximo da planilha | O tamanho máximo da planilha com suporte no Excel é de 1.048.576 linhas por 16.384 colunas. |
| Estilo de célula | O serviço exportador do Excel não oferece suporte à exportação de um estilo personalizado aplicado a um componente de célula. Nesses cenários, recomendamos o uso da Biblioteca do Excel. |
API References
O serviço Exportador do Excel tem mais algumas APIs para explorar, listadas abaixo.
Componentes adicionais que foram usados:
Additional Resources
Nossa comunidade é ativa e sempre acolhedora para novas ideias.
GitHub