はじめに
こんばんは。
ついに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);
}
このコードで、excelでもセルに分かれてきちんと表示されました。
また、TypeScriptで記述しているのですが、 参考のコードのままだと Property 'webkitURL' does not exist on type 'Window'
というエラーが出ていたので、以下の対応をしております。
stackoverflow.com
終わりに
最近vueを業務で少しだけ触らしてもらっているのですが、面白いですね。
ReactとVueを勉強で少し触ったことあるのですが、個人的にはReactより遥かに簡単でした。
今後ももっと触れるように勉強しようと思います !
現場からは以上です。