1. ホーム
  2. javascript

[解決済み] JavaScriptの配列情報をcsvにエクスポートする方法(クライアント側)?

2022-03-15 13:38:12

質問

この種の質問はたくさんあると思いますが、私はJavaScriptを使ってこれを行う必要があります。私は Dojo 1.8 で、すべての属性情報を配列で持っていて、以下のような感じです。

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

これをどのように CSV をクライアント側で使用することはできますか?

どのように解決するのですか?

これはネイティブのJavaScriptでできます。このように、データを正しいCSV形式にパースする必要があります(質問で説明したように、データに配列の配列を使用していると仮定します)。

const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

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

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

またはもっと短い方法 矢印機能 ):

const rows = [
    ["name1", "city1", "some other info"],
    ["name2", "city2", "more info"]
];

let csvContent = "data:text/csv;charset=utf-8," 
    + rows.map(e => e.join(",")).join("\n");

そうすると、JavaScriptの window.openencodeURI 関数を使って、このように CSV ファイルをダウンロードすることができます。

var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

編集する

ファイルに特定の名前を付けたい場合は、少し異なる方法を取る必要があります。 window.open メソッドを使用します。これを実現するためには、隠しメソッドである <a> DOMノードを作成し、その download 属性を次のように設定します。

var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF

link.click(); // This will download the data file named "my_data.csv".