迹忆客 专注技术分享

本教程将演示如何在客户端将 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"