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';
// import { IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  providers: [ IgxCsvExporterService ]
})

export class AppModule {}

Note

v12.2.1 이상에서는 내보내기 서비스가 루트에서 제공됩니다. 즉, 더 이상 AppModule 공급자에서 이를 선언할 필요가 없습니다.

내보내기 프로세스를 시작하려면 구성 요소 템플릿의 버튼 핸들러를 사용할 수 있습니다.

<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.

다음은 구성 요소의 TypeScript 파일에서 내보내기 프로세스를 실행하는 코드입니다.

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

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.

예는 다음과 같습니다.

<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

CSV 내보내기는 여러 유형의 내보내기 형식을 지원합니다. 내보내기 형식을 지정할 수 있습니다:

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

내보내기 형식에 따라 파일 확장자와 값 구분 기호가 다릅니다. 다음 표에는 내보내기 형식과 해당 파일 확장자 및 구분 기호가 매핑되어 있습니다.

체재	파일 확장자	기본 구분 기호
`CsvFileTypes.CSV`	.csv	반점
`CsvFileTypes.TAB`	.탭	탭
`CsvFileTypes.TSV`	.tsv	탭

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.

다음 예에서는 이름이 "Age"이고 인덱스가 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

CSV 내보내기 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.

사용된 추가 구성요소:

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.