Angular Pivot Grid Excel を Excel サービスへエクスポート

Angular Excel Exporter の例

EXAMPLE

MODULES

TS

HTML

SCSS

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { 
	IgxPivotGridModule,
	IgxExcelExporterService
 } from "igniteui-angular";
import { PivotExportComponent } from "./pivot-grid/pivot-export/pivot-export.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	PivotExportComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxPivotGridModule
],
  providers: [IgxExcelExporterService],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
tsコピー

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

import {
    IPivotConfiguration, PivotAggregation, IgxPivotNumericAggregate, IgxPivotDateDimension,
    IgxExcelExporterService, IgxExcelExporterOptions, IgxPivotGridComponent
} 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'
})
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="raised" (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'>
    </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 アプリケーションを構築するための豊富な機能セット。

無料で試してみる

Pivot Grid のデータのエクスポート

IgniteUI Excel Exporter を使用するには、IgxExcelExporterService を app.module.ts ファイルにインポートし、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 以降では、エクスポーター サービスは root で提供されます。つまり、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 { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
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 コンポーネントとその下にボタンを確認できます。ボタンを押すととエクスポート処理をトリガーし、ブラウザーで ExportedDataFile.xlsx ファイルをダウンロードします。このファイルは MS Excel 形式の Pivot Grid のデータを含みます。

Excel の展開/縮小インジケーターは、ピボット グリッドの最後のディメンションの階層に基づいて表示されます。

Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた Pivot Grid はテーブルとしてフォーマットされません。

エクスポートするコンテンツのカスタマイズ

上記の例では、Excel Exporter サービスで利用可能なデータをすべてエクスポートしました。行または列全体のエクスポートをしない方が良い場合があります。実装は、各列で発生される columnExporting または各行で発生される rowExporting イベントを処理し、イベント引数オブジェクトの cancel プロパティを true に設定して各イベントをキャンセルします。

以下の例は、ヘッダーが「Amount of Sale」の場合、エクスポートからすべての列を除外します。

// 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

Pivot Grid コンポーネントのデータ エクスポートでは、行フィルタリングおよび列の非表示などの機能に応じて Pivot Grid で表示されるデータのみをエクスポートします。IgxExcelExporterOptions オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。

既知の制限

制限	説明
ワークシートの最大サイズ	Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。
セルのスタイル設定	IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、Excel Library を使用することをお勧めします。

API リファレンス

以下は、その他の Excel Exporter サービスの API です。

• IgxExcelExporterService API
• IgxExcelExporterOptions API

使用したその他のコンポーネント:

• IgxPivotGridComponent API
• IgxPivotGridComponent スタイル

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)