我知道有很多这种性质的问题，但我需要使用JavaScript来做到这一点。我使用Dojo 1.8并在数组中拥有所有属性信息，它看起来像这样:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道我如何在客户端将此导出为CSV吗?
当前回答
这里有许多将数据转换为CSV的解决方案，但几乎所有的解决方案都有各种各样的注意事项，即在不出错的情况下正确格式化数据类型。
为什么不使用一些经过验证的东西:Papa Parse
Papa.unparse(data[, config])
然后只需结合这与本地下载解决方案之一在这里，如。@ArneHB的那个看起来不错。
其他回答
我来这里是为了寻求更多的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。
来自@Default的解决方案在Chrome上完美地工作(非常感谢!)，但我有一个IE问题。
以下是一个解决方案(适用于IE10):
var csvContent=data; //here we load our csv data
var blob = new Blob([csvContent],{
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, "filename.csv")
这里有两个问题:
如何将数组转换为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, '');
您可以在原生JavaScript中做到这一点。你必须把你的数据解析成正确的CSV格式(假设你在问题中描述的数据使用数组的数组):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,";
rows.forEach(function(rowArray) {
let row = rowArray.join(",");
csvContent += row + "\r\n";
});
或者更简单的方法(使用箭头函数):
const rows = [
["name1", "city1", "some other info"],
["name2", "city2", "more info"]
];
let csvContent = "data:text/csv;charset=utf-8,"
+ rows.map(e => e.join(",")).join("\n");
然后就可以使用JavaScript的窗口了。open和encodeURI函数下载CSV文件，如下所示:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
编辑:如果你想给你的文件一个特定的名字，你必须做一些不同的事情，因为这是不支持访问一个数据URI使用窗口。开放的方法。为了实现这一点，你可以创建一个隐藏的<a> DOM节点，并将其下载属性设置如下:
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", "my_data.csv");
document.body.appendChild(link); // Required for FF
link.click(); // This will download the data file named "my_data.csv".
就是这样:
<!doctype html>
<html>
<head></head>
<body>
<a href='#' onclick='downloadCSV({ filename: "stock-data.csv" });'>Download CSV</a>
<script type="text/javascript">
var stockData = [
{
Symbol: "AAPL",
Company: "Apple Inc.",
Price: "132.54"
},
{
Symbol: "INTC",
Company: "Intel Corporation",
Price: "33.45"
},
{
Symbol: "GOOG",
Company: "Google Inc",
Price: "554.52"
},
];
function convertArrayOfObjectsToCSV(args) {
var result, ctr, keys, columnDelimiter, lineDelimiter, data;
data = args.data || null;
if (data == null || !data.length) {
return null;
}
columnDelimiter = args.columnDelimiter || ',';
lineDelimiter = args.lineDelimiter || '\n';
keys = Object.keys(data[0]);
result = '';
result += keys.join(columnDelimiter);
result += lineDelimiter;
data.forEach(function(item) {
ctr = 0;
keys.forEach(function(key) {
if (ctr > 0) result += columnDelimiter;
result += item[key];
ctr++;
});
result += lineDelimiter;
});
return result;
}
window.downloadCSV = function(args) {
var data, filename, link;
var csv = convertArrayOfObjectsToCSV({
data: stockData
});
if (csv == null) return;
filename = args.filename || 'export.csv';
if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>
