🎃
【JavaScript】JSでCSVファイルダウンロード機能を実装！
本記事では、ボタンをクリックしたらCSVダウンロードする機能の実装方法を紹介します。Excelで閲覧した際の文字化け対策もしています。
BOMとは
.csvがExcelで文字化けしないよう、csvファイルの文字コードをUTF-8のBOM付きに変更する必要があります。
BOM(byte order mark）)は、ファイルの先頭に付与され文字コード（符号化方式）を選別します。
Unicodeとはのことです。
Unicode（様々な文字を集めた定義、符号化文字集合）を符号化したものが、UTF-8、UTF-16、UTF-32などと番号が振られます。また、UTF-16とUTF-32にはコンピュータ構造によってエンディアン（バイトオーダー）方式が異なるため、BOMの値を見てUTF-16、UTF-32エンディアンを判定します。
UTF-8はエンディアン方式の違いはないため、通常BOMは必要ありません。
しかし、MicrosoftのExcelなどは、文字コードをUTF-8と判断できず文字化けを起こしてしまいます。
そのため、BOM付きcsvファイルに変更する必要があります。
JS
CSVをダウンロードする処理の流れは、以下の通りです
- CSVのデータにBOMを付与する
- Blobでファイルを生成する
- CSVファイルをダウンロードする
＊ Blob(Binary Large Object)とは、二進数で表されたバイナリデータをBlobオブジェクトとして作成すると、様々なデータ形式のファイルとして保存できるものです。
CSVのデータにBOMを付与する
//CSVデータ
const filename = "download.csv"
const data = "テスト, テスト, テスト\nテスト, テスト, テスト"
//BOMを付与
const bom = new Uint8Array([0xef, 0xbb, 0xbf])
Blobでデータを作成する
//BlobからオブジェクトURLを作成
const blob = new Blob([bom, data], { type: "text/csv" })
CSVファイルをダウンロードする
//リンク先にダウンロード用リンクを指定する
const link = document.createElement('a')
link.download = filename
link.href = URL.createObjectURL(blob)
link.click()
//createObjectURLで作成したオブジェクトURLを開放する
URL.revokeObjectURL(link.href)
コード全体
function downloadCSV() {
//CSVデータ
const filename = "download.csv"
const data = "テスト, テスト, テスト\nテスト, テスト, テスト"
//BOMを付与
const bom = new Uint8Array([0xef, 0xbb, 0xbf])
//BlobからオブジェクトURLを作成
const blob = new Blob([bom, data], { type: "text/csv" })
//リンク先にダウンロード用リンクを指定する
const link = document.createElement('a')
link.download = filename
link.href = URL.createObjectURL(blob)
link.click()
//createObjectURLで作成したオブジェクトURLを開放する
URL.revokeObjectURL(link.href)
}
//ボタンを取得する
const downloadBtn = document.getElementById("download");
//ボタンがクリックされたら「downloadCSV」を実行する
downloadBtn.addEventListener("click", downloadCSV, false);
参考
[JavaScript] Blob を使ってクリックするとファイルダウンロードができるボタンを設置する方法
Discussion