Exportador de CSV

O serviço IgniteUI CSV Exporter pode exportar dados em formato de Valores Separados por Caracteres, tanto de dados brutos (array) quanto de um IgxGrid, IgxHierarchicalGrid e IgxTreeGrid. A funcionalidade de exportação está encapsulada naIgxCsvExporterService classe.

Angular CSV Exporter Example

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

// app.module.ts

...
import { IgxCsvExporterService } from 'igniteui-angular/grids/core';
// 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 de tipoIgxCsvExporterService no construtor do componente e o framework Angular fornecerá uma instância do serviço. Para exportar alguns dados em formato CSV, 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 tipoIgxCsvExporterOptions, 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 { IgxCsvExporterService, IgxCsvExporterOptions, CsvFileTypes } from 'igniteui-angular/grids/core';
// 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 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.csv" que contém os dados dolocalData array em formato CSV.

Exporting IgxGrid's Data

O serviço CSV Exporter também pode exportar dados em formato CSV a partir de um IgxGrid. A única diferença é que você precisa invocar o método theIgxCsvExporterService 'sexport 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 } from 'igniteui-angular/grids/core';
import { IgxGridComponent } from 'igniteui-angular/grids/grid';
// 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 segundo argumento doIgxCsvExporterOptions construtor dos objetos
Usando aIgxCsvExporterOptions propriedade dofileType objeto

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 aIgxCsvExporterOptions propriedade dovalueDelimiter objeto.

Customizing the Exported Content

Nos exemplos acima, o serviço CSV 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 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'));

Quando você exporta dados do IgxGrid, o processo de exportação leva em conta recursos como filtragem de linhas e ocultação de colunas, exportando apenas os dados visíveis na grade. Você pode configurar o serviço exportador para incluir linhas filtradas ou colunas ocultas definindo propriedades noIgxCsvExporterOptions objeto. 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.