【JavaScript】配列データをCSVファイルとして保存できるようにする

jsJavaScript
この記事は約2分で読めます。
スポンサードリンク

はじめに

javascriptにおいて、変数として保持している配列データを、行と列を持つCSVデータに変換し、最終的にCSVファイルとして直接ダウンロードできるようにする方法を紹介します。

コード

CSVファイルをダウンロードするリンクの準備

まず、htmlファイル上に、CSVファイルをダウンロードするためのリンクを設置します。

<a id="downloadCSV">download</a>

以後の作業で、ユーザーがこのリンクをクリックしたらCSVファイルのダウンロードが開始されるようにしていきましょう。

配列をCSVデータに変換

次に、配列データ(rows)をCSVデータ(csvData)に変換する処理を行います。

const rows = [
    ["column1", "val1_1", "val1_2", "val1_3"],
    ["column2", "val2_1", "val2_2", "val2_3"]
];

let csvData= "data:text/csv;charset=utf-8,";

rows.forEach(function(rowvals) {
    let row = rowvals.join(",");
    csvData += row + "\r\n";
});

ダウンロードリンクにデータをセットする

まず、CSVデータをエンコードします。

次に、エンコードしたデータを、さきほど上で設置したダウンロードリンク(aタグのDOM)のattribute(属性)としてセットします。

具体的には、href属性にエンコードしたCSVデータを、downloadにダウンロードされるCSVファイル名をセットします。

var encodedUri = encodeURI(csvData);
var link = document.getElementById("downloadCSV");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "csvdata.csv");

これで、ユーザーがブラウザ上でリンクをクリックしたらCSVファイルのダウンロードが実行されます。

 

参考

How to export JavaScript array info to csv (on client side)?
I know there are lot of questions of this nature but I need to do this using JavaScript. I am using Dojo 1.8 and have all the attribute info in array, which loo...

オススメのプログラミングスクール紹介

【TechAcademy】自宅で学べる!プログラミングスクール

まずは無料体験からでも始められます

★ここがポイント!

 自宅にいながらオンラインで勉強できる
◎ パーソナルメンターがついて指導!

◎ チャットで質問もOK
◎ あなたのオリジナルサービスの開発をサポート!

JavaScriptプログラミング
スポンサードリンク
あれは魔法だろうか?
タイトルとURLをコピーしました