使用 JSZip 将 CSV 文件添加到 zip 文件后更改

Question

我有一个网站可以生成数据，然后将这些数据下载为 CSV 文件。数据最初位于一个数组中，然后我将其转换为 CSV 文件，如下所示：

var csvData = [['array', 'that'], ['contains', 'csv'], ['data']];

var csv = "";
csvData.forEach(function(row) {  
    csv += row.join(',');  
    csv += "\n";  
});
var csvFile = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

使用

下载后打开文件时看起来与预期一致

window.location.href = csvFile;

我正在尝试使用 JSZip 在 zip 文件中下载多个 CSV。我有一个循环执行与上述代码类似的代码，但我没有下载每个文件，而是将其添加到一个 zip 文件中。

var zip = new JSZip();
for(int i = 0; i < 10; i++) {
    var csvData = generateDataArray();

    var csv = "";
    csvData.forEach(function(row) {  
        csv += row.join(',');  
        csv += "\n";  
    });
    var csvFile = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

    zip.file(`${i}.csv`, csvFile);
}

zip.generateAsync({type:"base64"})
.then(function(content) {
    window.location.href = "data:application/zip;base64," + content;
});

我的问题是 zip 文件中的 CSV 文件写入不正确。所有数据只写在第一行。

这是文件应有的样子以及在 zip 之外下载时的样子

这是文件下载成 zip 文件后的样子

如有任何帮助，我将不胜感激。

Answer 1

我通过执行以下操作解决了问题：

而不是使用

var csv = "";
csvData.forEach(function(row) {  
    csv += row.join(',');  
    csv += "\n";  
});
var csvFile = 'data:text/csv;charset=utf-8,' + encodeURI(csv);

我用过这个：

var csvFile = csvData.map(e => e.join(",")).join("\n");

然后我使用以下方法将其添加到 zip 文件中：

zip.file(`${i}.csv`, csvFile);

它运行完美，但我仍然不知道为什么。如果有人能解释一下两者之间的区别，我会很高兴。