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

    Angular Excel Exporter の例

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

    v12.2.1 以降では、エクスポーター サービスは root で提供されます。つまり、AppModule プロバイダーでそれらを宣言する必要はありません。

    エクスポート処理の開始は、コンポーネントのテンプレートでボタンのハンドラーを使用します。

    <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 { 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'));
    }
    

    上記をすべて行うと、IgxPivotGrid コンポーネントとその下にボタンを確認できます。ボタンを押すととエクスポート処理をトリガーし、ブラウザーで ExportedDataFile.xlsx ファイルをダウンロードします。このファイルは MS Excel 形式の Pivot Grid のデータを含みます。

    Note

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

    Note

    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'));
    

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

    既知の制限

    制限 説明
    ワークシートの最大サイズ Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。

    API リファレンス

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

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

    その他のリソース

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