CSV 내보내기

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

    Angular CSV Exporter Example

    IgniteUI CSV 내보내기 사용을 시작하려면 먼저 app.module.ts 파일에서 IgxCsvExporterService 가져오고 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

    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';
// 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 형식으로 데이터를 내보낼 수도 있습니다. 유일한 차이점은 IgxCsvExporterService의 export 메소드를 호출하고 IgxGrid를 첫 번째 인수로 전달해야 한다는 것입니다.

    예는 다음과 같습니다.

    <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 내보내기는 여러 유형의 내보내기 형식을 지원합니다. 내보내기 형식을 지정할 수 있습니다:

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

    체재 파일 확장자 기본 구분 기호
    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

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