在 JavaScript 中將陣列匯出為 CSV
Shivam Arora
2021年10月2日
2021年7月3日
本教程將演示如何在客戶端將 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"