Exportador CSV

El servicio IgniteUI CSV Exporter puede exportar datos en formato de Valores Separados por Caracteres tanto desde datos en bruto (array) como desde un IgxGrid, IgxHierarchicalGrid e IgxTreeGrid. La funcionalidad de exportación está encapsulada en laIgxCsvExporterService clase.

Angular CSV Exporter Example

Para empezar a usar el exportador CSV de IgniteUI, primero importa elIgxCsvExporterService archivo en el app.module.ts y añade el servicio alproviders 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

En v12.2.1 y posteriores, los servicios de exportación se brindan en la raíz, lo que significa que ya no es necesario declararlos en los proveedores de AppModule.

Para iniciar un proceso de exportación, puede utilizar el controlador de un botón en la plantilla de su componente.

<button (click)="exportButtonHandler()">Export Data to CSV</button>

Puedes acceder al servicio exportador definiendo un argumento de tipoIgxCsvExporterService en el constructor del componente y el marco de Angular proporcionará una instancia del servicio. Para exportar algunos datos en formato CSV necesitas invocar el método delexportData servicio exportador. Este método acepta como primer argumento los datos que quieres exportar y el segundo argumento es de tipoIgxCsvExporterOptions y te permite configurar el proceso de exportación.

Aquí está el código que ejecutará el proceso de exportación en el archivo mecanografiado del 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);
}

Si todo ha ido bien, deberías ver un botón de exportación. Al pulsar, se activa el proceso de exportación y el navegador descarga un archivo llamado "ExportedDataFile.csv" que contiene los datos dellocalData array en formato CSV.

Exporting IgxGrid's Data

El servicio CSV Exporter también puede exportar datos en formato CSV desde un IgxGrid. La única diferencia es que tienes que invocar elIgxCsvExporterService método de the'sexport y pasar el IgxGrid como primer argumento.

Aquí hay un ejemplo:

<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

El Exportador CSV admite varios tipos de formatos de exportación. El formato de exportación se puede especificar:

como segundo argumento delIgxCsvExporterOptions constructor de los objetos
Usando laIgxCsvExporterOptions propiedad delfileType objeto

Los diferentes formatos de exportación tienen diferentes extensiones de archivo y delimitadores de valores. La siguiente tabla asigna los formatos de exportación y sus respectivas extensiones de archivo y delimitadores:

Formato	Extensión de archivo	Delimitador predeterminado
`CsvFileTypes.CSV`	.csv	Coma
`CsvFileTypes.TAB`	.pestaña	Pestaña
`CsvFileTypes.TSV`	.tsv	Pestaña

También puedes especificar un delimitador personalizado usando laIgxCsvExporterOptions propiedad delvalueDelimiter objeto.

Customizing the Exported Content

En los ejemplos anteriores, el servicio CSV Exporter exportaba todos los datos disponibles. Hay situaciones en las que quizá quieras saltarte la exportación de una fila o incluso de toda una columna. Para lograr esto, puedes enganchar a loscolumnExporting eventos y/orowExporting eventos que se disparan respectivamente para cada columna y/o fila y cancelar el evento correspondiente estableciendo la propiedad delcancel objeto argumento del evento paratrue.

El siguiente ejemplo excluirá una columna de la exportación si su nombre es "Edad" y si su índice es 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'));

Cuando exportas datos desde IgxGrid, el proceso de exportación tiene en cuenta funciones como el filtrado de filas y el ocultamiento de columnas, y exporta solo los datos visibles en la cuadrícula. Puedes configurar el servicio exportador para incluir filas filtradas o columnas ocultas estableciendo propiedades en elIgxCsvExporterOptions objeto. Estas propiedades se describen en la tabla siguiente.

API Summary

El servicio CSV Exporter tiene algunas API más para explorar, que se enumeran a continuación.

Componentes adicionales que se utilizaron:

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.