Excel 서비스로 Angular 그리드 내보내기

Excel 내보내기 서비스는 IgxGrid에서 데이터를 Excel로 내보낼 수 있습니다. 데이터 내보내기 기능은 IgxExcelExporterService 클래스에 캡슐화되어 있으며 데이터는 MS Excel 테이블 형식으로 내보내집니다. 이 형식을 사용하면 필터링, 정렬 등과 같은 기능을 사용할 수 있습니다. 이렇게 하려면 IgxExcelExporterService의 export 메소드를 호출하고 IgxGrid 구성 요소를 첫 번째 인수로 전달하여 그리드를 쉽게 내보내야 합니다.

Angular Excel Exporter Example

Exporting Grid's Data

IgniteUI Excel 내보내기 사용을 시작하려면 먼저 app.module.ts 파일에서 IgxExcelExporterService 가져오고 providers 배열에 서비스를 추가합니다.

// app.module.ts
import { IgxExcelExporterService } from 'igniteui-angular';
// import { IgxExcelExporterService } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
  providers: [ IgxExcelExporterService ]
})

export class AppModule {}

Note

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

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

<igx-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>

구성 요소 생성자에서 IgxExcelExporterService 유형의 인수를 정의하여 내보내기 서비스에 액세스할 수 있으며 Angular 프레임워크는 서비스의 인스턴스를 제공합니다. 일부 데이터를 MS Excel 형식으로 내보내려면 내보내기 서비스의 export 메소드를 호출하고 IgxGrid 구성 요소를 첫 번째 인수로 전달해야 합니다.

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

// component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
import { IgxGridComponent } from 'igniteui-angular';

@ViewChild('grid') public grid: IgxGridComponent;

constructor(private excelExportService: IgxExcelExporterService) {
}

public exportButtonHandler() {
  this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
}

모든 것이 순조롭게 진행되면 IgxGrid 구성 요소와 그 아래에 버튼이 표시됩니다. 버튼을 누르면 내보내기 프로세스가 시작되고 브라우저는 MS Excel 형식의 그리드 구성 요소 데이터가 포함된 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다.

Export All Data

​페이징과 같은 원격 작업을 사용 중이고 그리드가 모든 데이터에 액세스할 수 없는 경우가 있습니다. 이러한 경우에는 Excel 내보내기 서비스를 사용하고 가능한 경우 전체 데이터 수집을 전달하는 것이 좋습니다. 예:

public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}

Export Grouped Data

그룹화된 데이터를 내보내려면 하나 이상의 열을 기준으로 그리드를 그룹화하면 됩니다. 브라우저는 선택한 열별로 그룹화된 MS Excel 형식의 그리드 구성 요소 데이터를 포함하는 "ExportedDataFile.xlsx"라는 파일을 다운로드합니다. 예:

Export Multi Column Headers Grid

이제 다중 열 헤더가 정의된 그리드를 내보낼 수 있습니다. 모든 헤더는 그리드에 표시될 때 내보낸 Excel 파일에 반영됩니다. 내보낸 데이터에서 정의된 다중 열 헤더를 제외하려면 내보내기 옵션인 ignoreMultiColumnHeaders를​ ​true로 설정할 수 있습니다.

Note

Excel 테이블은 여러 행 머리글을 지원하지 않으므로 내보낸 그리드는 테이블 형식으로 지정되지 않습니다.

Export Grid with Frozen Column Headers

기본적으로 Excel 내보내기 서비스는 스크롤 가능한(고정 해제된) 열 머리글과 함께 그리드를 내보냅니다. 사용자가 레코드를 스크롤할 때 항상 표시되도록 내보낸 Excel 파일 위에 모든 헤더를 고정하려는 시나리오가 있습니다. 이를 달성하려면 내보내기 옵션 FreezeHeaders를​ ​true로 설정할 수 있습니다.

public exportButtonHandler() {
    const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
    exporterOptions.freezeHeaders = true;
    this.excelExportService.export(this.grid, exporterOptions);
}

Customizing the Exported Content

위의 예에서 Excel 내보내기 서비스는 사용 가능한 모든 데이터를 내보내고 있었습니다. 행이나 전체 열 내보내기를 건너뛰고 싶은 상황이 있습니다. 이를 달성하려면 각 열 및/또는 각 행에 대해 각각 실행되는 columnExporting 및/또는 rowExporting 이벤트에 연결하고 이벤트 인수 객체의 cancel 속성을 true로 설정하여 해당 이벤트를 취소할 수 있습니다.

다음 예에서는 헤더가 "Age"이고 인덱스가 1인 경우 내보내기에서 열을 제외합니다.

// component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));

그리드 구성 요소에서 데이터를 내보낼 때 내보내기 프로세스는 행 필터링 및 열 숨기기와 같은 계정 기능을 사용하고 그리드에 표시되는 데이터만 내보냅니다. IgxExcelExporterOptions 객체에 속성을 설정하여 필터링된 행이나 숨겨진 열을 포함하도록 내보내기 서비스를 구성할 수 있습니다.

Known Limitations

한정	설명
최대 워크시트 크기	Excel에서 지원되는 최대 워크시트 크기는 1,048,576행 x 16,384열입니다.
셀 스타일링	Excel 내보내기 서비스는 셀 구성 요소에 적용된 사용자 정의 스타일 내보내기를 지원하지 않습니다. 이러한 시나리오에서는 Excel 라이브러리를 사용하는 것이 좋습니다.

API References

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

• IgxExcelExporterService API
• IgxExcelExporterOptions API

사용된 추가 구성요소:

• IgxGridComponent API
• IgxGrid구성 요소 스타일

Additional Resources

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub