Excel Exporter

Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形式で生データ (配列) または IgxGrid、IgxTreeGrid および IgxHierarchicalGrid コンポーネントのデータをエクスポートできます。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式では、フィルタリングやソートなどの機能が使用できます。

Angular Excel Exporter の例

使用方法

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 プロバイダーでそれらを宣言する必要はありません。

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

<button (click)="exportButtonHandler()">Export Data to Excel</button>

エクスポーターサービスへのアクセスは、コンポーネントのコンストラクターで IgxExcelExporterService 型の引数を定義し、Angular フレームワークはサービスのインスタンスを提供します。データを MS Excel 形式でエクスポートするには、エクスポーターサービスの exportData メソッドを呼び出します。このメソッドで、エクスポートするデータは最初の引数です。2 番目の引数は IgxExcelExporterOptions 型で、エクスポート処理の構成を許可します。

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

// component.ts

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

public localData = [
  { Name: 'Eric Ridley', Age: '26' },
  { Name: 'Alanis Brook', Age: '22' },
  { Name: 'Jonathan Morris', Age: '23' }
];

constructor(private excelExportService: IgxExcelExporterService) {
}

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

正しく設定された場合、エクスポートボタンが表示されます。ボタンが押されるとエクスポート処理をトリガーし、ブラウザーで "ExportedDataFile.csv" ファイルをダウンロードします。このファイルは localData 配列のデータを MS Excel 形式で含みます。

IgxGrid データのエクスポート

上記の例では、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.igxGrid1, new IgxExcelExporterOptions('ExportedDataFile'));

API リファレンス

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

Grid Excel エクスポーター:

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

その他のリソース

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