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 objetoIgxCsvExporterOptions
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: