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

    Excel Exporter サービスは IgxTreeGrid のデータを MS Excel へエクスポートできます。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式ではフィルタリングやソートなどの機能が使用でき、IgxExcelExporterService の export メソッドを呼び出して最初の引数として IgxTreeGrid コンポーネントを渡し、グリッドを簡単にエクスポートします。

    Angular Excel Exporter の例

    Tree 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-tree-grid #treeGrid [data]="localData" [autoGenerate]="true"></igx-tree-grid>
<button (click)="exportButtonHandler()">Export IgxTreeGrid to Excel</button>

    エクスポーター サービスへのアクセスは、コンポーネントのコンストラクターで IgxExcelExporterService 型の引数を定義し、Angular フレームワークはサービスのインスタンスを提供します。データを MS Excel 形式でエクスポートするには、エクスポーター サービスの export メソッドを呼び出して IgxTreeGrid コンポーネントを最初の引数として渡します。

    以下のコードはコンポーネントの typescript ファイルでエクスポート処理を実行します。

    // component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
import { IgxTreeGridComponent } from 'igniteui-angular';

@ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;

constructor(private excelExportService: IgxExcelExporterService) {
}

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

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

    すべてのデータのエクスポート

    ページングなどのリモート操作を使用している場合に、Grid がすべてのデータにアクセスできない場合があります。このような場合、Excel Export サービスを使用してデータ コレクション全体を渡すことをお勧めします。例:

    public exportButtonHandler() {
  this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}

    複数列ヘッダー グリッドのエクスポート

    定義された複数列ヘッダーを使用して Tree Grid をエクスポートできるようになりました。すべてのヘッダーは、Tree Grid に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、エクスポーター オプション ignoreMultiColumnHeaders を true に設定できます。

    Note

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

    固定された列ヘッダーを使用してグリッドをエクスポートする

    デフォルトでは、Excel エクスポーター サービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。エクスポートされた Excel ファイルの上にあるすべてのヘッダーを固定して、ユーザーがレコードをスクロールしても常に表示されたままにするシナリオがあります。これを実現するには、エクスポーター オプション freezeHeaders を true に設定します。

    public exportButtonHandler() {
    const exporterOptions = new IgxExcelExporterOptions('ExportedDataFile');
    exporterOptions.freezeHeaders = true;
    this.excelExportService.export(this.grid, exporterOptions);
}

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

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

    以下の例では、ヘッダーが "Age" で、インデックスが 1 の場合、エクスポートから列を除外します。

    // component.ts

this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventArgs) => {
  if (args.header == 'Age' && args.columnIndex == 1) {
      args.cancel = true;
  }
});
this.excelExportService.export(this.treeGrid, new IgxExcelExporterOptions('ExportedDataFile'));

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

    既知の制限

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

    API リファレンス

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

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

    その他のリソース

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