こんにちは、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);

以上でデモでご紹介したCSVをダウンロードする機能は実装できます。

最後に

CSVをダウンロードする機能は、ログやリストを出力する場合に役立つ機能です。配列やJSONをCSVに変換して出力することもできるため色々な場面で使用することができるかと思います。CSVをダウンロードする機能を実装する際にはぜひ本記事を参考にしていただければ幸いです!

以上、JavaScriptでCSVのダウンロード機能を実装する(Excelの日本語文字化け対応)のご紹介でした!

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。