我知道有很多这种性质的问题,但我需要使用JavaScript来做到这一点。我使用Dojo 1.8并在数组中拥有所有属性信息,它看起来像这样:

[["name1", "city_name1", ...]["name2", "city_name2", ...]]

知道我如何在客户端将此导出为CSV吗?


当前回答

我来这里是为了寻求更多的RFC 4180遵从性,但我没有找到一个实现,所以我根据自己的需要做了一个(可能效率很低)实现。我想跟大家分享一下。

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal = '';

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result = '"' + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

希望这能在未来帮助到一些人。这结合了CSV的编码和下载文件的能力。在jsfiddle的例子中。您可以下载该文件(假设HTML 5浏览器)或在控制台中查看输出。

更新:

Chrome现在似乎已经失去了命名文件的能力。我不确定发生了什么或如何修复它,但每当我使用这段代码(包括jsfiddle)时,下载的文件现在被命名为download.csv。

其他回答

我来这里是为了寻求更多的RFC 4180遵从性,但我没有找到一个实现,所以我根据自己的需要做了一个(可能效率很低)实现。我想跟大家分享一下。

var content = [['1st title', '2nd title', '3rd title', 'another title'], ['a a a', 'bb\nb', 'cc,c', 'dd"d'], ['www', 'xxx', 'yyy', 'zzz']];

var finalVal = '';

for (var i = 0; i < content.length; i++) {
    var value = content[i];

    for (var j = 0; j < value.length; j++) {
        var innerValue =  value[j]===null?'':value[j].toString();
        var result = innerValue.replace(/"/g, '""');
        if (result.search(/("|,|\n)/g) >= 0)
            result = '"' + result + '"';
        if (j > 0)
            finalVal += ',';
        finalVal += result;
    }

    finalVal += '\n';
}

console.log(finalVal);

var download = document.getElementById('download');
download.setAttribute('href', 'data:text/csv;charset=utf-8,' + encodeURIComponent(finalVal));
download.setAttribute('download', 'test.csv');

希望这能在未来帮助到一些人。这结合了CSV的编码和下载文件的能力。在jsfiddle的例子中。您可以下载该文件(假设HTML 5浏览器)或在控制台中查看输出。

更新:

Chrome现在似乎已经失去了命名文件的能力。我不确定发生了什么或如何修复它,但每当我使用这段代码(包括jsfiddle)时,下载的文件现在被命名为download.csv。

下面是一个原生的js解决方案。

function export2csv() { let data = ""; const tableData = []; const rows = [ ['111', '222', '333'], ['aaa', 'bbb', 'ccc'], ['AAA', 'BBB', 'CCC'] ]; for (const row of rows) { const rowData = []; for (const column of row) { rowData.push(column); } tableData.push(rowData.join(",")); } data += tableData.join("\n"); const a = document.createElement("a"); a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" })); a.setAttribute("download", "data.csv"); document.body.appendChild(a); a.click(); document.body.removeChild(a); } <button onclick="export2csv()">Export array to csv file</button>

我使用这个函数将字符串[][]转换为csv文件。如果单元格包含",a或其他空格(空格除外),则引用该单元格:

/**
 * Takes an array of arrays and returns a `,` sparated csv file.
 * @param {string[][]} table
 * @returns {string}
 */
function toCSV(table) {
    return table
        .map(function(row) {
            return row
                .map(function(cell) {
                    // We remove blanks and check if the column contains
                    // other whitespace,`,` or `"`.
                    // In that case, we need to quote the column.
                    if (cell.replace(/ /g, '').match(/[\s,"]/)) {
                        return '"' + cell.replace(/"/g, '""') + '"';
                    }
                    return cell;
                })
                .join(',');
        })
        .join('\n'); // or '\r\n' for windows

}

注意:不工作在Internet Explorer < 11除非地图是填充。

注意:如果单元格包含数字,你可以在If (cell.replace…将数字转换为字符串。

或者你可以用ES6在一行中写:

t.map(r=>r.map(c=>c.replace(/ /g, '').match(/[\s,"]/)?'"'+c.replace(/"/g,'""')+'"':c).join(',')).join('\n')

在Chrome 35更新中,下载属性行为发生改变。

https://code.google.com/p/chromium/issues/detail?id=373182

要在chrome中工作,使用这个

var pom = document.createElement('a');
var csvContent=csv; //here we load our csv data 
var blob = new Blob([csvContent],{type: 'text/csv;charset=utf-8;'});
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'foo.csv');
pom.click();

这里有两个问题:

如何将数组转换为csv字符串 如何将该字符串保存到文件

第一个问题的所有答案(除了millimetric给出的答案)似乎都有些夸张。Milimetric提供的方法不包括其他要求,比如用引号括住字符串或转换对象数组。

以下是我的看法:

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

    var test_array = [["name1", 2, 3], ["name2", 4, 5], ["name3", 6, 7], ["name4", 8, 9], ["name5", 10, 11]];
    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

此方法还允许您在内部连接中指定除逗号之外的列分隔符。例如一个制表符: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, '');