UTF-16 BOM付きのCSVファイルを作成・ダウンロードする方法

Ajaxでサーバーからデータを取得

最初に、Ajaxを使用してサーバーからデータを取得します。

$.ajax({
  url: "xxxx",
  type: "POST",
  data: {
    "store_id": [{!! $data['dl'] ? implode(', ',$data['dl']) : '' !!}],
    "start_day": "{!! $data['start_day'] !!}",
    "end_day": "{!! $data['end_day'] !!}"
  },
  success: function(data, status, xhr){
    // 後続の処理
  }
});

データをCSV形式に変換

次に、取得したデータをCSV形式に変換し、BOM（Byte Order Mark）を追加します。

var file_name = 'test.csv';
csv_string = "\ufeff" + data; // BOM追加

CSVファイルのダウンロード

最後に、作成したCSVファイルをダウンロードします。

コードの解説

• url: サーバーのエンドポイント。
• type: HTTPメソッド（この場合はPOST）。
• data: サーバーに送信するデータ。

データをCSV形式に変換

次に、取得したデータをCSV形式に変換し、BOM（Byte Order Mark）を追加します。

エンディアンの確認

実行環境がリトルエンディアンかビッグエンディアンかを確認します。

function isLittleEndian(){
  if ((new Uint8Array((new Uint16Array([0x00ff])).buffer))[0]) return true;
  return false;
}

CSVファイルのダウンロード

最後に、作成したCSVファイルをダウンロードします。

• Blobオブジェクトとwindow.URL.createObjectURLを使用してダウンロードリンクを生成します。

まとめ

この記事では、JavaScriptを用いてサーバーからデータを取得し、それをUTF-16 BOM付きのCSVファイルに変換してダウンロードする方法について解説しました。この手法を用いることで、様々なデータを効率よくエクスポートすることが可能です。