Exportador de CSV

O serviço IgniteUI CSV Exporter pode exportar dados em um formato Character Separated Values de dados brutos (matriz) ou de um IgxGrid, IgxHierarchicalGrid e IgxTreeGrid. A funcionalidade de exportação é encapsulada na classe IgxCsvExporterService.

Angular CSV Exporter Example

Para começar a usar o IgniteUI CSV Exporter, primeiro importe o IgxCsvExporterService no arquivo app.module.ts e adicione o serviço ao array providers:

// app.module.ts

...
import { IgxCsvExporterService } from 'igniteui-angular';
// import { IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  providers: [ IgxCsvExporterService ]
})

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 CSV</button>

Você pode acessar o serviço exportador definindo um argumento do tipo IgxCsvExporterService no construtor do componente e o framework Angular fornecerá uma instância do serviço. Para exportar alguns dados no formato CSV, 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 IgxCsvExporterOptions 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 { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular';
// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } 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 csvExportService: IgxCsvExporterService) {
}

public exportButtonHandler() {
  this.csvExportService.exportData(this.localData, new IgxCsvExporterOptions('ExportedDataFile'), CsvFileTypes.CSV);
}

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.csv" que contém os dados do array localData no formato CSV.

Exporting IgxGrid's Data

O serviço CSV Exporter também pode exportar dados em formato CSV de um IgxGrid. A única diferença é que você precisa invocar o método export do IgxCsvExporterService e passar o IgxGrid como primeiro argumento.

Aqui está um exemplo:

<igx-grid #igxGrid1 [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid</button>

// component.ts

...
import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponent } from 'igniteui-angular';
// import { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes, IgxGridComponen } from '@infragistics/igniteui-angular'; for licensed package
...

@ViewChild('igxGrid1') public igxGrid1: IgxGridComponent;

public localData = [
  { Name: 'Eric Ridley', Age: '26' },
  { Name: 'Alanis Brook', Age: '22' },
  { Name: 'Jonathan Morris', Age: '23' }
];

constructor(private csvExportService: IgxCsvExporterService) {
}

public exportButtonHandler() {
  this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile', CsvFileTypes.CSV));
}

Customizing the Exported Format

O CSV Exporter suporta vários tipos de formatos de exportação. O formato de exportação pode ser especificado:

como um segundo argumento do construtor do objeto IgxCsvExporterOptions
usando a propriedade fileType do objeto IgxCsvExporterOptions

Diferentes formatos de exportação têm diferentes extensões de arquivo e delimitadores de valor. A tabela a seguir mapeia os formatos de exportação e suas respectivas extensões de arquivo e delimitadores:

Formatar	Extensão de arquivo	Delimitador Padrão
`CsvFileTypes.CSV`	.csv	Vírgula
`CsvFileTypes.TAB`	.aba	Guia
`CsvFileTypes.TSV`	.tsv	Guia

Você também pode especificar um delimitador personalizado usando a propriedade valueDelimiter dos objetos IgxCsvExporterOptions.

Customizing the Exported Content

Nos exemplos acima, o serviço CSV Exporter 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-se aos eventos columnExporting e/ou rowExporting que são disparados respectivamente para cada coluna e/ou cada linha e cancelar o respectivo evento definindo a propriedade cancel do objeto de argumento do evento como true.

O exemplo a seguir excluirá uma coluna da exportação se seu nome for "Idade" e se seu índice for 1:

// component.ts

this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile'));

Ao exportar dados do IgxGrid, o processo de exportação leva em conta recursos como filtragem de linhas e ocultação de colunas e exporta apenas os dados visíveis na grade. Você pode configurar o serviço exportador para incluir linhas filtradas ou colunas ocultas definindo propriedades no objeto IgxCsvExporterOptions. Essas propriedades são descritas na tabela abaixo.

API Summary

O serviço CSV Exporter tem mais algumas APIs para explorar, listadas abaixo.

Componentes adicionais que foram usados:

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.