JavaScript で配列を CSV にエクスポート

Shivam Arora 2023年10月12日

JavaScript JavaScript CSV

このチュートリアルでは、JavaScript 配列情報をクライアント側の CSV ファイルにエクスポートする方法を示します。

配列情報を CSV ファイルに変換するには、JavaScript データを CSV 形式に正しく解析する必要があります。エンコーディングと CSV データ形式を処理できるオブジェクトとして保存する必要があります。

この例では、配列の配列を使用してデータを格納します。

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];

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

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

data 配列から csvContent オブジェクトにコンテンツを保存します。各配列の行を作成し、個別のオブジェクトに格納します。

または、矢印関数を使用して同じ結果を得る短い方法として、次のコードを使用することもできます。

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
let csvContent =
    'data:text/csv;charset=utf-8,' + data.map(e => e.join(',')).join('\n');

map() 関数は、配列内の各要素で関数を呼び出し、新しい配列を作成します。join() メソッドは、セパレータを使用して、既存の配列のコンポーネントを文字列に結合します。この場合、区切り文字としてコンマを使用します。

上記で作成した CSV オブジェクトをダウンロードしてエンコードするには、次のコードを使用します。

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

次に、この csvContent オブジェクトを外部ファイルにエクスポートします。EncodeURI は URI をエンコードするために使用されます。この関数は、(, / ? : @ & = + $) 以外の特殊文字をエンコードし、エンコードされた URI を表す文字列値を返します。

CSV ファイルに特定の名前を付けるには、非表示の DOM ノードを作成し、ダウンロード機能を設定する必要があります。

これは以下で行われます。

var encodedUri = encodeURI(csvContent);
var link = document.createElement('a');
link.setAttribute('href', encodedUri);
link.setAttribute('download', 'my_data.csv');
document.body.appendChild(link);
link.click();

setAttribute() メソッドは、指定された要素に特定の属性値を追加します。上記のコードでは、link.click() を使用してダウンロードし、link.setAttribute() 関数で提供されたファイル名を直接ダウンロードします。

データを二重引用符で囲んで挿入する場合は、CSV データオブジェクトの作成中に JSON.stringify() 関数を使用できます。

以下のコードを参照してください。

const data =
    [['rahul', 'delhi', 'accounts dept'], ['rajeev', 'UP', 'sales dept']];
var csv = data.map(function(d) {
                return JSON.stringify(d);
              })
              .join('\n')
              .replace(/(^\[)|(\]$)/mg, '');
console.log(csv);

出力：

"rahul" "delhi" "accounts"
"rajev" "UP"  "sales dept"