Angular Pivot Grid를 Excel 서비스로 내보내기

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

Angular Excel Exporter 예제

EXAMPLE

TS

HTML

SCSS

import { Component, ViewChild } from "@angular/core";

import { IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate, IgxPivotDateDimension, IgxExcelExporterService, IgxExcelExporterOptions, IgxPivotGridComponent, IgxButtonDirective } from "igniteui-angular"
import { SALES_DATA } from "../../data/dataToAnalyze";

export class IgxTotalSaleAggregate {
    public static totalSale: PivotAggregation = (members, data: any) =>
        data.reduce((accumulator, value) => accumulator + value.Product.UnitPrice * value.NumberOfUnits, 0);

    public static totalMin: PivotAggregation = (members, data: any) => {
        let min = 0;
        if (data.length === 1) {
            min = data[0].Product.UnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
            min = mappedData.reduce((a, b) => Math.min(a, b));
        }
        return min;
    };

    public static totalMax: PivotAggregation = (members, data: any) => {
        let max = 0;
        if (data.length === 1) {
            max = data[0].Product.UnitPrice * data[0].NumberOfUnits;
        } else if (data.length > 1) {
            const mappedData = data.map(x => x.Product.UnitPrice * x.NumberOfUnits);
            max = mappedData.reduce((a, b) => Math.max(a, b));
        }
        return max;
    };
}

@Component({
    selector: 'app-pivot-export-sample',
    styleUrls: ['./pivot-export.component.scss'],
    templateUrl: './pivot-export.component.html',
    imports: [IgxButtonDirective, IgxPivotGridComponent]
})
export class PivotExportComponent {
    @ViewChild(IgxPivotGridComponent, { static: true }) public grid: IgxPivotGridComponent;
    
    public data = SALES_DATA;

    public pivotConfig: IPivotConfiguration = {
        columns: [
            new IgxPivotDateDimension(
                {
                    memberName: 'Date',
                    enabled: true
                },
                {
                    months: false,
                    quarters: true,
                    fullDate: false
                }
            )
        ],
        rows: [
            {
                memberName: 'City',
                width: "150px",
                memberFunction: (data) => data.Seller.City,
                enabled: true
            },
            {
                memberFunction: () => 'All Products',
                memberName: 'AllProducts',
                enabled: true,
                width: "150px",
                childLevel: {
                    memberFunction: (data) => data.Product.Name,
                    memberName: 'ProductCategory',
                    enabled: true
                }
            }
        ],
        values: [
            {
                member: 'Value',
                aggregate: {
                    key: 'SUM',
                    aggregator: IgxPivotNumericAggregate.sum,
                    label: 'Sum'
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: IgxPivotNumericAggregate.sum,
                    label: 'Sum'
                }],
                enabled: true,
                formatter: (value) => value ? '$' + parseFloat(value).toFixed(3) : undefined
            },
            {
                member: 'AmountofSale',
                displayName: 'Amount of Sale',
                aggregate: {
                    key: 'SUM',
                    aggregator: IgxTotalSaleAggregate.totalSale,
                    label: 'Sum of Sale'
                },
                aggregateList: [{
                    key: 'SUM',
                    aggregator: IgxTotalSaleAggregate.totalSale,
                    label: 'Sum of Sale'
                }, {
                    key: 'MIN',
                    aggregator: IgxTotalSaleAggregate.totalMin,
                    label: 'Minimum of Sale'
                }, {
                    key: 'MAX',
                    aggregator: IgxTotalSaleAggregate.totalMax,
                    label: 'Maximum of Sale'
                }],
                enabled: true,
                dataType: 'currency'
            }
        ]
    };

    constructor(private excelExportService: IgxExcelExporterService) {
    }

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

<div class="pivotgrid-sample">
    <div class="button-container">
        <button igxButton="contained" (click)="exportButtonHandler()">Export To Excel</button>
        Press the button to export the Pivot Grid as .xlsx file.
    </div>

    <igx-pivot-grid #grid [data]="data" [pivotConfiguration]="pivotConfig" [rowSelection]="'single'"
        [superCompactMode]="true" [defaultExpandState]='true' [pivotUI]="{ showRowHeaders: true }">
    </igx-pivot-grid>
</div>
htmlコピー

.pivotgrid-sample {
    justify-content: center;
    margin: 0 auto;
    width: 90%;
    height: 80%;

    .button-container {
        align-items: flex-start;
        margin: 25px auto;
    }

    igx-pivot-grid {
        align-items: center;
    }
}
scssコピー

Edit in: StackBlitz

이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.

60 以上のコンポーネント、柔軟な API、強力なテーマ設定およびブランディング機能、必要な速度と機能を備えた Angular アプリケーションを構築するための豊富な機能セット。

無料で試してみる

피벗 그리드의 데이터 내보내기

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 {}
typescript

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

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

<igx-pivot-grid #pivotGrid [data]="localData" [pivotConfiguration]="pivotConfig"></igx-pivot-grid>
<button (click)="exportButtonHandler()">Export IgxPivotGrid to Excel</button>
html

구성 요소의 생성자에서 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'));
}
typescript

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

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

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

내보낸 콘텐츠 사용자 정의

위의 예에서 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'));
typescript

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

알려진 제한 사항

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

API 참조

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

• IgxExcelExporterService API
• IgxExcelExporterOptions API

사용된 추가 구성요소:

• IgxPivotGridComponent API
• IgxPivotGridComponent Styles

추가 리소스

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

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