Exportador de CSV

The IgniteUI CSV Exporter service can export data in a Character Separated Values format from both raw data (array) or from an IgxGrid, IgxHierarchicalGrid and IgxTreeGrid. The exporting functionality is encapsulated in the IgxCsvExporterService class.

Angular CSV Exporter Example

To start using the IgniteUI CSV Exporter first import the IgxCsvExporterService in the app.module.ts file and add the service to the providers 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>

You may access the exporter service by defining an argument of type IgxCsvExporterService in the component's constructor and the Angular framework will provide an instance of the service. To export some data in CSV format you need to invoke the exporter service's exportData method. This method accepts as a first argument the data you want to export and the second argument is of type IgxCsvExporterOptions and allows you to configure the export process.

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);
}

If all went well, you should see an export button. When pressed, it will trigger the export process and the browser will download a file named "ExportedDataFile.csv" which contains the data from the localData array in CSV format.

Exporting IgxGrid's Data

The CSV Exporter service can also export data in CSV format from an IgxGrid. The only difference is that you need to invoke the IgxCsvExporterService's export method and pass the IgxGrid as first argument.

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:

as a second argument of the IgxCsvExporterOptions objects's constructor
using the IgxCsvExporterOptions object's fileType property

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

You can also specify a custom delimiter using the IgxCsvExporterOptions objects's valueDelimiter property.

Customizing the Exported Content

In the above examples the CSV Exporter service was exporting all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this you may hook to the columnExporting and/or rowExporting events which are fired respectively for each column and/or each row and cancel the respective event by setting the event argument object's cancel property to 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'));

When you are exporting data from IgxGrid the export process takes in account features like row filtering and column hiding and exports only the data visible in the grid. You can configure the exporter service to include filtered rows or hidden columns by setting properties on the IgxCsvExporterOptions object. These properties are described in the table below.

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.