この記事では、エクスポートの開始時にファイル名をユーザー入力で設定する方法を紹介します。
IgxGrid の設定
IgxGridToolbarExporterComponent のexportStartedイベントをバインドすることで、エクスポート開始時にファイル名を指定させる処理をフックできます。
<igx-grid .... >
<igx-grid-toolbar>
<igx-grid-toolbar-actions>
<igx-grid-toolbar-exporter
[exportExcel]="true"
[exportCSV]="true"
(exportStarted)="exportStarted($event)">
</igx-grid-toolbar-exporter>
</igx-grid-toolbar-actions>
</igx-grid-toolbar>
...
</igx-grid>
エクスポートの設定
IgxExporterEvent を受け取るexportStarted()メソッド内で、prompt() を使ってユーザーにファイル名を入力させます。ユーザーがキャンセルした場合、または空のファイル名を入力した場合、エクスポートをキャンセルすることも可能です。
import { IGX_GRID_DIRECTIVES, IgxExporterEvent } from '@infragistics/igniteui-angular';
....
exportStarted(ev: IgxExporterEvent) {
const reply = prompt('Please enter the file name for the export:', 'my-exported-data');
if (reply === null || reply.trim() === '') {
ev.cancel = true;
return;
}
ev.options.fileName = reply.trim();
}
実行結果
EXPORT ボタンを押すと、下図のようなダイアログが表示されます。ここで入力したファイル名が、そのままダウンロードされる Excel または CSV ファイルの名前として使われます。
ダウンロード後、以下のコマンドで実行できます。
npm ci npm run dev
