在 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"
Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe