jsでのcsvダウンロード - もがき系プログラマの日常

はじめに

こんばんは。

ついに12月になりアドベントカレンダーが書き切れるかどうか不安な僕です。

とりあえず、気持ちを整理しつつ今回は、jsでのcsvダウンロードを試しました。

ちょこっとハマったので、残しておきます。

やってみた

最初は以下のサイトを参考に作ってみました。

https://codepen.io/dimaZubkov/pen/eKGdxN

export function csvExport(data: Object[]) {
  let csvContent = 'data:text/csv;charset=utf-8,'; 
  csvContent += [...targetData.map(item => Object.values(item).join(','))]
  .join("\n")
  .replace(/(^\[)|(\]$)/gm, "");

  const data = encodeURI(csvContent);
  const link = document.createElement("a");
  link.setAttribute("href", data);
  link.setAttribute("download", "download.csv");
  link.click();
}

ダウンロードは問題なく、表示も問題なさそうでした。

しかし自分は macのnumbersというアプリケーションでみていたので問題なく見えてるだけでした。

windowsのExcelでは、カンマ区切りでセルが別れず、すべて1カラムに表示されていました。

うーんと調べていたところ、以下のサイトが見つかりました。

qiita.com

Bom付きでダウンロードさせるみたいです。

参考コードをそのまま使わせてもらいました。

それが以下です。

export function csvExport(data: Object[]) {
  const csvContent = [...data.map(item => Object.values(item).join(','))]
    .join('\n')
    .replace(/(^\[)|(\]$)/gm, '');

  let bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  let blob = new Blob([bom, csvContent], { type: 'text/csv' });
  let url = (window.URL || (window as any).webkitURL).createObjectURL(blob);
  let link = document.createElement('a');
  link.download = 'download.csv';
  link.href = url;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}