在 JavaScript 中将数组导出为 CSV

Shivam Arora 2021年10月2日 2021年7月3日

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"

相关文章 - JavaScript CSV