JavaScriptでCSVをDLする方法

こんにちは、いわむらです

今回はJavaScriptでCSVファイルを出力する方法をこの間覚えたのでご紹介しようと思います

CSVファイルはサーバーサイドの方で作成した情報をjsonで返ってくる想定で作成します

とりあえず先に完成形はこんな感じになります(※ IEやFirefoxでは別途対応が必要)

function downloadCSV(data) {
  const data = data.csv;
  const bom  = new Uint8Array([0xef, 0xbb, 0xbf]);
  const blob = new Blob([bom, data], { type: "text/csv" });
  const url  = 
    (window.URL || window.webkitURL).createObjectURL(blob);
  const downloadElement    = document.createElement("a"); 
  downloadElement.href     = url;
  downloadElement.download = 'sample.csv';
  downloadElement.click();
  (window.URL || window.webkitURL).revokeObjectURL(url);
}

自分の作成したコードは、受け取ったdataオブジェクトの中にcsvプロパティがあり(中身はCSVの元になる情報)それを sample.csv というファイルとして出力する処理になっています

実装前の自分は知らない処理ばっかりだったので1行ずつ処理を追って説明してみようと思います

const data = data.csv

これは 引数に渡されたdataオブジェクトからcsvの内容を取り出しています

const bom = new Uint8Array([0xef, 0xbb, 0xbf])

new Uint8Array がなんぞやって感じだったのでMDNで調べました

Uint8Arrayは型付き配列であり、 8 ビット符号なし整数値の配列を表します。中身は0で初期化されます。生成されると、配列の中の要素はオブジェクトのメソッドを使用するか、配列の標準的な添字の構文を使用するか (すなわち、ブラケット構文を使用するか) して参照することができます。

やっているのはUTF-8のファイルだということを示すためにUint8Arrayを使ってバイナリデータにしてます

const = new Blob([bom, data], { type: "text/csv" })

これは受け取った引数を元に新しいBlob (バイナリ・ラージ・オブジェクト) を作成します。第1引数に元になる情報、第2引数にオプションとしてMINEタイプを渡しています。

const url = (window.URL || window.webKitURL).createObjectURL(blob)

ブラウザのメモリ上にあるblobを参照するためのオブジェクトURL作成をしています

const downloadElement = document.createElement("a")

ダウンロードを実行するためにaタグを作成しています

downloadElement.href = url

ダウンロード先のURLは先程作成したオブジェクトURLをセットしています

downloadElement.download = 'sample.csv'

aタグのdownload属性に値をセットするとセットした値のファイル名でダウンロードされるので指定のファイル名をセットしています

downloadElement.click()

擬似的にクリックしたことにしてダウンロードを実行させています

(window.URL || window.webkitURL).revokeObjectURL(url)

最後にダウンロードが完了したらオブジェクトURL生成時にブラウザのメモリを利用しているのでメモリを開放します

といった感じの流れで終了です

今回1行ずつ処理を見てみてとても勉強になりました

次回は今回の処理をTypeScriptで実装してみようかなと思っています

最後まで読んでいただきありがとうございました