IgbGrid – CSV エクスポート時の日付の書式を指定する

Blazor 向け UI コンポーネントライブラリ Ignite UI for Blazor に含まれるグリッドコンポーネント、IgbGrid では、以下のように IgbGridToolbar および IgbGridToolbarExporter をマークアップすることで、

<IgbGrid ...>

    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarExporter />
        </IgbGridToolbarActions>
    </IgbGridToolbar>
    ...

グリッドの内容を CSV 形式でダウンロード (エクスポート) できる機能と UI を追加することができます (下図)。

しかし既定では、この機能を利用してダウンロードされた CSV ファイル中、日時の列については、以下のように、グリッド上での表示とは異なる書式で記載されてしまいます。

Id,氏名,生年月日
1,Alice,Thu Nov 23 1995 00:00:00 GMT+0900 (日本標準時)
2,Bob,Sun Feb 15 1998 00:00:00 GMT+0900 (日本標準時)
3,Charlie,Tue Jul 04 2000 00:00:00 GMT+0900 (日本標準時)
4,David,Sun Oct 12 2003 00:00:00 GMT+0900 (日本標準時)
5,Eve,Sat Dec 31 2005 00:00:00 GMT+0900 (日本標準時)

CSV にエクスポートされるときの日時列の書式を制御するには、エクスポート時のデータ内容を JavaScript を使って書き換えることができる機能が IgbGrid にはありますので、この機能を応用して任意の記載に制御可能です。具体的には以下のようにします。

まず、以下のような内容の JavaScript ファイルを用意し、例えば “wwwroot/helper.js” といったファイル名で保存しておきます。

// helper.js

// igRegisterScript については下記ナレッジベースを参照。
// https://kb.jp.infragistics.com/?p=12487

igRegisterScript("formatDateInRowExporting", () => {

  // グリッドの行エクスポートイベントを購読するオブジェクトです。
  const formatDateCells = {
    // 1行エクスポートするごとに next メソッドが呼び出されます。
    next: (context) => {

      // 引数から、エクスポートする行データが参照できるので、
      const rowData = context.rowData;

      // このサンプルでは、行データ内の日付型のプロパティをすべて
      // 巡回し、"yyyy/MM/dd" 形式の文字列に差し替えます。
      Object.keys(rowData).forEach(key => {
        const cellValue = rowData[key];
        if (!cellValue instanceof Date) return;

        rowData[key] = cellValue.toLocaleString("ja-JP", { 
          year:"numeric",month:"2-digit",day:"2-digit"});
      });
    }
  };

  // グリッドがエクスポート処理を実行するときに呼び出されます
  return (e) => {

    // エクスポートするファイルがCSVファイルである場合、
    const { options, exporter } = e.detail;
    const isCSVfile = options.fileName.endsWith(".csv");
    if (!isCSVfile) return;

    // かつ、イベント未購読の場合に、
    const observers = exporter.rowExporting.observers;
    if (observers.find(o=> o === formatDateCells)) return;

    // エクスポート機能の行エクスポートイベントに、
    // 先に定義した購読オブジェクトを追加します。
    observers.push(formatDateCells);
  };

}, true);

上記ファイル内のコメントにあるとおり、この JavaScript プログラムは、グリッドのエクスポート処理実行時のイベントを購読して、日時型のセルの値を “yyyy/MM/dd” 形式の文字列に書き換えてエクスポートする処理を実装し、これを “formatDateInRowExporting” という名前で Ignite UI for Blazor に登録しています。

こうして用意した JavaScript ファイルを、Blazor のフォールバックページ (“wwwroot/index.html” など) で、script 要素で読み込みます。このとき、”_content/IgniteUI.Blazor/app.bundle.js” の script 要素よりあとで参照するようにしてください。

<!-- wwwroot/index.html -->
  ...
  <script src="_content/IgniteUI.Blazor/app.bundle.js"></script>
  <script src="_framework/blazor.webassembly.js"></script>

  <!-- 👇 用意した .js ファイルを script 要素で読み込み -->
  <script src="helper.js"></script>
</body>
</html>

あとは、IgbGrid 側で、上記で実装・登録したスクリプトの名前 (この例では “formatDateInRowExporting”) を “ToolbarExportingScript” パラメーターに指定します。

<IgbGrid ...
  ToolbarExportingScript="formatDateInRowExporting">
  ...

こうすることで、このグリッドからのエクスポート時は、指定された名前のスクリプトがそのエクスポート処理のたびに呼び出され、その指定された名前の JavaScript プログラムがエクスポートされる内容を書き換えながら (つまり、日時型のセルの値を書式化しながら) エクスポートが遂行されます。結果、以下のような CSV ファイルが得られます。

Id,氏名,生年月日
1,Alice,1995/11/23
2,Bob,1998/02/15
3,Charlie,2000/07/04
4,David,2003/10/12
5,Eve,2005/12/31

プログラム全体のソースコードは以下から参照できます。