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

    Excel 내보내기 서비스는 IgxPivotGrid에서 Excel로 데이터를 내보낼 수 있습니다. 데이터 내보내기 기능은 IgxExcelExporterService 클래스에 캡슐화되어 있습니다. 프로세스를 트리거하려면 IgxExcelExporterService의 export 메서드를 호출하고 IgxPivotGrid 구성 요소를 첫 번째 인수로 전달해야 합니다.

    Angular Excel Exporter Example

    Exporting Pivot 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-pivot-grid #pivotGrid [data]="localData" [pivotConfiguration]="pivotConfig"></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: IgxPivotGridComponent;

constructor(private excelExportService: IgxExcelExporterService) {
}

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

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

    Note

    Excel의 확장/축소 표시기는 피벗 그리드의 마지막 차원의 계층 구조를 기반으로 표시됩니다.

    Note

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

    Customizing the Exported Content

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

    다음 예에서는 헤더가 "판매량"인 경우 모든 열을 내보내기에서 제외합니다.

    // component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
    if (args.header == 'Amount of Sale') {
        args.cancel = true;
    }
});
this.excelExportService.export(this.pivotGrid, new IgxExcelExporterOptions('ExportedDataFile'));

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

    Known Limitations

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

    API References

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

    사용된 추가 구성요소:

    Additional Resources

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