IgxGrid – エクスポートファイル名を指定したい

この記事では、エクスポートの開始時にファイル名をユーザー入力で設定する方法を紹介します。

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

関連ドキュメント

• IgxExporterEvent | Ignite UI for Angular