Pivot Grid Export to Excel Service
The Excel Exporter service can export data to excel from the IgxPivotGrid. The data export functionality is encapsulated in the IgxExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the IgxExcelExporterService's export method and pass the IgxPivotGrid component as first argument to export grid easily.
Excel 내보내기 데모
Pivot Grid의 데이터 내보내기
IgniteUI Excel 내보내기를 사용하려면 먼저 app.module.ts 파일에서 IgxExcelExporterService 를 가져와서 providers 배열에 서비스를 추가합니다:
// app.module.ts
...
import { IgxExcelExporterService } from "igniteui-angular/services/index";
@NgModule({
providers: [ IgxExcelExporterService ]
})
export class AppModule {}
참고: Excel 내보내기 서비스는 JSZip 라이브러리에 피어 종속됩니다. Excel 내보내기를 사용할 경우에는 JSZip 라이브러리를 설치해야 합니다.
내보내기 처리를 시작하려면 컴포넌트 템플릿에 있는 버튼 핸들러를 사용해야 합니다.
<igx-pivot-grid #pivotGrid [data]="localData" [autoGenerate]="true"></igx-pivot-grid>
<button (click)="exportButtonHandler()">Export IgxPivotGrid to Excel</button>
컴포넌트 생성자에서 IgxExcelExporterService 형식의 인수를 정의하여 내보내기 서비스에 액세스할 수 있으며 Angular 프레임워크는 서비스 인스턴스를 제공합니다. 데이터를 MS Excel 형식으로 내보내기를 하려면 내보내기 서비스의 export 메소드를 호출하고 IgxPivotGrid 컴포넌트를 첫 번째 인수로서 전달해야 합니다.
다음은 컴포넌트의 typescript 파일에서 내보내기 처리를 실행하는 코드입니다:
// component.ts
...
import { IgxExcelExporterService, IgxExcelExporterOptions } from "igniteui-angular";
import { IgxPivotGridComponent } from "igniteui-angular";
...
@ViewChild("pivotGrid") public pivotGrid: IgxGridComponent;
constructor(private excelExportService: IgxExcelExporterService) {
}
public exportButtonHandler() {
this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions("ExportedDataFile"));
}
모두 다 실행되면 IgxPivotGrid 컴포넌트와 그 아래에 버튼이 표시됩니다. 버튼을 누르면 내보내기 처리가 트리거되고 브라우저에서 MS Excel 형식의 Pivot Grid 컴포넌트에서 데이터를 포함한 “ExportedDataFile.xlsx” 파일을 다운로드합니다.
내보내기를 하는 콘텐츠의 사용자 정의
위의 예에서 Excel 내보내기 서비스는 사용 가능한 모든 데이터를 내보내기 했습니다. 행 또는 전체 열 내보내기를 하지 말아야 하는 상황이 있을 수 있습니다. 이를 위해 각 열 및/또는 각 행에서 각각 발생하는 onColumnExport 및/또는 onRowExport 이벤트를 처리하고 이벤트 인수 객체의 cancel 속성을 true로 설정하여 해당 이벤트를 취소할 수 있습니다.
다음 예에서는 헤더가 “Age”이고 인덱스가 1인 경우, 내보내기에서 열을 제외합니다:
// component.ts
this.excelExportService.onColumnExport.subscribe((args: IColumnExportingEventArgs) => {
if (args.header == "Age" && args.columnIndex == 1) {
args.cancel = true;
}
});
this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions("ExportedDataFile"));
Pivot Grid 컴포넌트에서 데이터를 내보내기 할 때 내보내기 처리는 행 필터링 및 열 숨기기 등의 기능을 사용하고 Pivot Grid 에 표시되는 데이터만 내보내기를 합니다. IgxExcelExporterOptions 객체의 속성을 설정하여 필터링된 행 또는 숨겨진 열을 포함하도록 내보내기 서비스를 구성할 수 있습니다. 이러한 속성은 아래 표에 설명되어 있습니다.
API 참조
Excel 내보내기 서비스에는 아래의 몇 가지 API가 추가로 포함되어 있습니다.
사용된 추가 컴포넌트:
추가 리소스
커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.
GitHub