在 JavaScript 中將陣列匯出為 CSV

Shivam Arora 2021年10月2日 2021年7月3日
在 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"

相關文章 - JavaScript CSV