JavaScript数组到CSV

Question

我已经按照这篇文章如何将JavaScript数组信息导出到csv(在客户端)？获取嵌套的js数组写为csv文件.

该数组看起来像:

var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];

链接中给出的代码很好地工作,除了在csv文件的第三行之后所有其余值都在同一行上,例如

name1,2,3
name2,4,5
name3,6,7
name4,8,9name5,10,11等

任何人都可以解释为什么会这样吗？使用Chrome或FF也是如此.

谢谢

编辑

jsfiddle http://jsfiddle.net/iaingallagher/dJKz6/

伊恩

Answer 1

引用的答案是错误的.你必须改变

csvContent += index < infoArray.length ? dataString+ "\n" : dataString;

至

csvContent += dataString + "\n";

顺便说一下,引用的代码不是最理想的.你应该避免重复附加到字符串.您应该替换为数组,并在末尾执行array.join("\n").像这样:

var lineArray = [];
data.forEach(function (infoArray, index) {
    var line = infoArray.join(",");
    lineArray.push(index == 0 ? "data:text/csv;charset=utf-8," + line : line);
});
var csvContent = lineArray.join("\n");

至于为什么引用的答案是错误的(有趣的是它已被接受!):,回调函数index的第二个参数forEach,是循环数组中的索引,将它与大小相比没有意义infoArray,是所述数组的项目(恰好也是一个数组).

Answer 2

一般形式是:

var ids = []; <= this is your array/collection
var csv = ids.join(",");

对于你的情况,你将不得不适应一点

Answer 3

我创建了这个代码来创建一个漂亮,可读的csv文件:

var objectToCSVRow = function(dataObject) {
    var dataArray = new Array;
    for (var o in dataObject) {
        var innerValue = dataObject[o]===null?'':dataObject[o].toString();
        var result = innerValue.replace(/"/g, '""');
        result = '"' + result + '"';
        dataArray.push(result);
    }
    return dataArray.join(' ') + '\r\n';
}

var exportToCSV = function(arrayOfObjects) {

    if (!arrayOfObjects.length) {
        return;
    }

    var csvContent = "data:text/csv;charset=utf-8,";

    // headers
    csvContent += objectToCSVRow(Object.keys(arrayOfObjects[0]));

    arrayOfObjects.forEach(function(item){
        csvContent += objectToCSVRow(item);
    }); 

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "customers.csv");
    document.body.appendChild(link); // Required for FF
    link.click();
    document.body.removeChild(link); 
}

在您的情况下,由于您在数组中使用数组而不是数组中的对象,您将跳过标题部分,但您可以通过放置此列而不是该部分来自己添加列名:

// headers
csvContent += '"Column name 1" "Column name 2" "Column name 3"\n';

秘诀是空格分隔csv文件中的列,我们将列值放在双引号中以允许空格,并转义值本身中的任何双引号.

另请注意,我将空值替换为空字符串,因为这符合我的需要,但您可以更改它并将其替换为您喜欢的任何内容.

Answer 4

对于一个简单的csv,一个map()和一个join()就足够了:

var csv = test_array.map(function(d){
    return d.join();
}).join('\n');

/* Results in 
name1,2,3
name2,4,5
name3,6,7
name4,8,9
name5,10,11

此方法还允许您在内部指定除逗号之外的列分隔符join.例如一个标签:d.join('\t')

另一方面,如果你想正确地做并将字符串括在引号中"",那么你可以使用一些JSON魔法:

var csv = test_array.map(function(d){
   return JSON.stringify(d);
})
.join('\n') 
.replace(/(^\[)|(\]$)/mg, ''); // remove opening [ and closing ] brackets from each line 

/* would produce
"name1",2,3
"name2",4,5
"name3",6,7
"name4",8,9
"name5",10,11

如果你有像这样的对象数组:

var data = [
  {"title": "Book title 1", "author": "Name1 Surname1"},
  {"title": "Book title 2", "author": "Name2 Surname2"},
  {"title": "Book title 3", "author": "Name3 Surname3"},
  {"title": "Book title 4", "author": "Name4 Surname4"}
];

// use
var csv = data.map(function(d){
    return JSON.stringify(Object.values(d));
})
.join('\n') 
.replace(/(^\[)|(\]$)/mg, '');

Answer 5

如果您的数据包含任何换行符或逗号，您需要先转义它们：

const escape = text =>
    text.replace(/\\/g, "\\\\")
        .replace(/\n/g, "\\n")
        .replace(/,/g, "\\,")

escaped_array = test_array.map(fields => fields.map(escape))

然后简单地做：

csv = escaped_array.map(fields => fields.join(","))
                .join("\n")

如果要使其可在浏览器中下载：

dl = "data:text/csv;charset=utf-8," + csv
window.open(encodeURI(dl))

Answer 6

以下代码是用 ES6 编写的，它可以在大多数浏览器中正常运行。

var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];

// Construct the comma seperated string
// If a column values contains a comma then surround the column value by double quotes
const csv = test_array.map(row => row.map(item => (typeof item === 'string' && item.indexOf(',') >= 0) ? `"${item}"`: String(item)).join(',')).join('\n');

// Format the CSV string
const data = encodeURI('data:text/csv;charset=utf-8,' + csv);

// Create a virtual Anchor tag
const link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', 'export.csv');

// Append the Anchor tag in the actual web page or application
document.body.appendChild(link);

// Trigger the click event of the Anchor link
link.click();

// Remove the Anchor link form the web page or application
document.body.removeChild(link);