Exportador CSV

El servicio IgniteUI CSV Exporter puede exportar datos en un formato de valores separados por caracteres desde datos sin procesar (matriz) o desde IgxGrid, IgxHierarchicalGrid e IgxTreeGrid. La funcionalidad de exportación está encapsulada en la clase IgxCsvExporterService.

Angular CSV Exporter Example

Para comenzar a usar IgniteUI CSV Exporter, primero importe IgxCsvExporterService en el archivo app.module.ts y agregue el servicio a la matriz 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

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>

Puede acceder al servicio exportador definiendo un argumento de tipo IgxCsvExporterService en el constructor del componente y el marco Angular proporcionará una instancia del servicio. Para exportar algunos datos en formato CSV, debe invocar el método exportData del servicio exportador. Este método acepta como primer argumento los datos que deseas exportar y el segundo argumento es de tipo IgxCsvExporterOptions 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';
// 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 salió bien, deberías ver un botón de exportación. Cuando se presiona, se activará el proceso de exportación y el navegador descargará un archivo llamado "ExportedDataFile.csv" que contiene los datos de la matriz localData 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 debe invocar el método de export de IgxCsvExporterService y pasar 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, 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

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

como segundo argumento del constructor de objetos IgxCsvExporterOptions
usando la propiedad fileType del objeto IgxCsvExporterOptions

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 puede especificar un delimitador personalizado utilizando la propiedad valueDelimiter de los objetos IgxCsvExporterOptions.

Customizing the Exported Content

En los ejemplos anteriores, el servicio CSV Exporter exportaba todos los datos disponibles. Hay situaciones en las que es posible que desee omitir la exportación de una fila o incluso de una columna completa. Para lograr esto, puede conectarse a los eventos columnExporting y/o rowExporting que se activan respectivamente para cada columna y/o cada fila y cancelar el evento respectivo estableciendo la propiedad cancel del objeto de argumento de evento en true.

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 exporta datos desde IgxGrid, el proceso de exportación tiene en cuenta características como el filtrado de filas y la ocultación de columnas y exporta solo los datos visibles en la cuadrícula. Puede configurar el servicio exportador para incluir filas filtradas o columnas ocultas estableciendo propiedades en el objeto IgxCsvExporterOptions. Estas propiedades se describen en la siguiente tabla.

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.