Angular Grid Excel を Excel サービスへエクスポート
Excel Exporter サービスは IgxGrid のデータを MS Excel へエクスポートできます。エクスポート機能は、IgxExcelExporterService
クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式ではフィルタリングやソートなどの機能が使用でき、IgxExcelExporterService
の export
メソッドを呼び出して最初の引数として IgxGrid コンポーネントを渡し、グリッドを簡単にエクスポートします。
Angular Excel Exporter の例
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-grid #grid [data]="localData" [autoGenerate]="true"></igx-grid>
<button (click)="exportButtonHandler()">Export IgxGrid to Excel</button>
エクスポーター サービスへのアクセスは、コンポーネントのコンストラクターで IgxExcelExporterService
型の引数を定義し、Angular フレームワークはサービスのインスタンスを提供します。データを MS Excel 形式でエクスポートするには、エクスポーター サービスの export
メソッドを呼び出して IgxGrid コンポーネントを最初の引数として渡します。
以下のコードはコンポーネントの typescript ファイルでエクスポート処理を実行します。
// component.ts
import { IgxExcelExporterService, IgxExcelExporterOptions } from 'igniteui-angular';
// import { IgxExcelExporterService, IgxExcelExporterOptions } from '@infragistics/igniteui-angular'; for licensed package
import { IgxGridComponent } from 'igniteui-angular';
@ViewChild('grid') public grid: IgxGridComponent;
constructor(private excelExportService: IgxExcelExporterService) {
}
public exportButtonHandler() {
this.excelExportService.export(this.grid, new IgxExcelExporterOptions('ExportedDataFile'));
}
上記をすべて行うと、IgxGrid コンポーネントとその下にボタンを確認できます。ボタンを押すととエクスポート処理をトリガーし、ブラウザーで ExportedDataFile.xlsx ファイルをダウンロードします。このファイルは MS Excel 形式の Grid のデータを含みます。
すべてのデータのエクスポート
ページングなどのリモート操作を使用している場合に、Grid がすべてのデータにアクセスできない場合があります。このような場合、Excel Export サービスを使用してデータ コレクション全体を渡すことをお勧めします。例:
public exportButtonHandler() {
this.excelExportService.exportData(this.localData, new IgxExcelExporterOptions('ExportedDataFile'));
}
グループ化されたデータのエクスポート
グループ化されたデータをエクスポートするには、Grid を 1 つ以上の列でグループ化する必要があります。ブラウザーは、選択した列でグループ化された MSExcel 形式の Grid コンポーネントからのデータを含む「ExportedDataFile.xlsx」という名前のファイルをダウンロードします。例:
複数列ヘッダー グリッドのエクスポート
定義された複数列ヘッダーを使用して Grid をエクスポートできるようになりました。すべてのヘッダーは、Grid に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、エクスポーター オプション ignoreMultiColumnHeaders を true
に設定できます。
Note
Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた 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.grid, new IgxExcelExporterOptions('ExportedDataFile'));
Grid コンポーネントのデータ エクスポートでは、行フィルタリングおよび列の非表示などの機能に応じて Grid で表示されるデータのみをエクスポートします。IgxExcelExporterOptions
オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。
既知の制限
制限 | 説明 |
---|---|
ワークシートの最大サイズ | Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。 |
セルのスタイル設定 | IgxExcelExporterService は、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このような場合は、Excel Library を使用することをお勧めします。 |
API リファレンス
以下は、その他の Excel Exporter サービスの API です。
使用したその他のコンポーネント: