目次
本記事では、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をダウンロードする機能は、ログやリストを出力する場合に役立つ機能です。配列やをCSVに変換して出力することもできるため色々な場面で使用することができるかと思います。CSVをダウンロードする機能を実装する際にはぜひ本記事を参考にしていただければ幸いです！
以上、JavaScriptでCSVのダウンロード機能を実装する（Excelの日本語文字化け対応）のご紹介でした！
