【JavaScript】CSVのダウンロード機能を実装する！Excelの日本語文字化け対応

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでCSVをダウンロードする機能の実装方法をご紹介しています。Excelで開くことが多いファイルのため、Excelで閲覧した際に文字化けしないように対応しています。

WebページにCSVをダウンロードする機能をつけたいんだけど、良い方法ないかな？

上記の疑問にお答えしています

では、解説していきます。

CSVをダウンロードする機能とは

本記事で作成する内容は冒頭で簡単にご紹介しましたが、実際に触っていただいた方がイメージが伝わると思いますので、デモをご用意しました。「Download CSV」というボタンをクリックしてみてください。CSVファイルがダウンロードされます。

See the Pen
Download CSV | JavaScript by ryohei (@intotheprogram)
on CodePen.

ダウンロードしたCSVファイルには3列2行で「テスト」という文言が記載されています。この部分を変更することで任意のCSVファイルを作成することができます。

どんなものを作成するかわかったところで、早速CSVをダウンロードする機能を組んでいきましょう。

HTMLでダウンロードするボタンを作成する

まずはデモで表示されている「Download CSV」と書かれたボタンを作成していきます。下記のサンプルではbuttonタグを使用していますが、ボタンクリックがイベントの起点になっているだけなので、他のタグ（aタグやspanタグなど）に変更していただいても大丈夫です。

HTML

<button id="download" type="button">Download CSV</button>

以上でボタンの作成は完了です。続いてボタンがクリックされた後、実際に「CSVファイル」をダウンロードする機能を作っていきましょう。

CSVをダウンロードする機能を作成する

CSVをダウンロードする処理はJavaScriptで組んでいきます。処理の流れとしては下記のようになるのかなと思います。

CSV（カンマ区切り）のデータを作成する
作成したデータがExcelで文字化けしないようにBOMを付与する
(UTF-8で作成されたファイルということを知らせる)
Blobでファイルを生成する
CSVファイルをダウンロードする

では実際に処理を作っていきます。下記はデモで使用しているコード全文です。各行にコメントを入れていますので、詳細はそちらをご確認いただければと思います。

JavaScript

function downloadCSV() {

    //ダウンロードするCSVファイル名を指定する

    const filename = "download.csv";

    //CSVデータ

    const data = "テスト, テスト, テスト\nテスト, テスト, テスト";

    //BOMを付与する（Excelでの文字化け対策）

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

    //Blobでデータを作成する

    const blob = new Blob([bom, data], { type: "text/csv" });
    //IE10/11用(download属性が機能しないためmsSaveBlobを使用）

    if (window.navigator.msSaveBlob) {

        window.navigator.msSaveBlob(blob, filename);
    //その他ブラウザ

    } else {

        //BlobからオブジェクトURLを作成する

        const url = (window.URL || window.webkitURL).createObjectURL(blob);

        //ダウンロード用にリンクを作成する

        const download = document.createElement("a");

        //リンク先に上記で生成したURLを指定する

        download.href = url;

        //download属性にファイル名を指定する

        download.download = filename;

        //作成したリンクをクリックしてダウンロードを実行する

        download.click();

        //createObjectURLで作成したオブジェクトURLを開放する

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

    }

}
//ボタンを取得する

const download = document.getElementById("download");

//ボタンがクリックされたら「downloadCSV」を実行する

download.addEventListener("click", downloadCSV, false);