CSV 내보내기

    IgniteUI CSV Exporter 서비스는 원시 데이터(배열) 또는 IgxGrid, IgxHierarchicalGrid, IgxTreeGrid 모두에서 문자 분리 값 형식으로 데이터를 내보낼 수 있습니다. 내보내기 기능은 클래스에IgxCsvExporterService 캡슐화되어 있습니다.

    Angular CSV Exporter Example

    IgniteUI CSV 익스포터 사용을 시작하려면 먼저 app.module.ts 파일 내 데이터를IgxCsvExporterService 가져오고 배열에providers 서비스를 추가하세요:

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

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

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

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

    컴포넌트의 구성자에서 타입IgxCsvExporterService 인수를 정의하여 익스포터 서비스에 접근할 수 있으며, Angular 프레임워크가 서비스의 인스턴스를 제공합니다. CSV 형식으로 데이터를 내보내려면 내보내기 서비스의exportData 메서드를 호출해야 합니다. 이 메서드는 첫 번째 인자로 내보내고 싶은 데이터를 받아들이고, 두 번째 인자는 타입IgxCsvExporterOptions 형태로 내보내기 과정을 구성할 수 있게 해줍니다.

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

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

    모든 게 잘 진행된다면 내보내기 버튼이 보일 거예요. 버튼을 누르면 내보내기 과정이 실행되고, 브라우저는 배열에서localData CSV 형식으로 데이터를 담은 "ExportedDataFile.csv"라는 파일을 다운로드합니다.

    Exporting IgxGrid's Data

    CSV 익스포터 서비스는 IgxGrid에서 CSV 형식으로 데이터를 내보낼 수도 있습니다. 유일한 차이점은 theIgxCsvExporterService의 메서드를export 호출하고 IgxGrid를 첫 번째 인수로 전달해야 한다는 점입니다.

    예는 다음과 같습니다.

    <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

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

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

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

    객체의IgxCsvExporterOptions 속성을 이용해valueDelimiter 사용자 지정 구분자를 지정할 수도 있습니다.

    Customizing the Exported Content

    위 예시에서 CSV 익스포터 서비스는 모든 사용 가능한 데이터를 내보내고 있었습니다. 어떤 상황에서는 행 내보내기나 열을 내보내는 것을 건너뛰고 싶을 수도 있습니다. 이를 위해 다음 물에 연결할 수 있습니다columnExporting 그리고/또는rowExporting 각 열과 행마다 각각 발생하며, 이벤트 인자 객체를 설정하여 해당 이벤트를 취소합니다cancel 속성은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'));

    ​IgxGrid에서 데이터를 내보낼 때는 행 필터링, 열 숨기기 같은 기능을 고려해 그리드에 보이는 데이터만 내보내요. 객체에IgxCsvExporterOptions 속성을 설정하여 필터된 행이나 숨겨진 열을 포함하도록 익스포터 서비스를 설정할 수 있습니다. 이러한 특성들은 아래 표에 설명되어 있습니다.

    API Summary

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

    사용된 추가 구성요소:

    Additional Resources

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