我知道有很多这种性质的问题,但我需要使用JavaScript来做到这一点。我使用Dojo 1.8并在数组中拥有所有属性信息,它看起来像这样:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道我如何在客户端将此导出为CSV吗?
我知道有很多这种性质的问题,但我需要使用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。
其他回答
上面的答案是可行的,但请记住,如果你以.xls格式打开,列~~可能会用'\t'而不是','分隔,答案https://stackoverflow.com/a/14966131/6169225对我来说很好,只要我在数组上使用.join('\t')而不是.join(',')。
来自@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")
简单地尝试一下,这里的一些答案不处理unicode数据和有逗号的数据,例如date。
function downloadUnicodeCSV(filename, datasource) {
var content = '', newLine = '\r\n';
for (var _i = 0, datasource_1 = datasource; _i < datasource_1.length; _i++) {
var line = datasource_1[_i];
var i = 0;
for (var _a = 0, line_1 = line; _a < line_1.length; _a++) {
var item = line_1[_a];
var it = item.replace(/"/g, '""');
if (it.search(/("|,|\n)/g) >= 0) {
it = '"' + it + '"';
}
content += (i > 0 ? ',' : '') + it;
++i;
}
content += newLine;
}
var link = document.createElement('a');
link.setAttribute('href', 'data:text/csv;charset=utf-8,%EF%BB%BF' + encodeURIComponent(content));
link.setAttribute('download', filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
ES6的一个箭头函数:
const dataToCsvURI = (data) => encodeURI(
`data:text/csv;charset=utf-8,${data.map((row, index) => row.join(',')).join(`\n`)}`
);
然后:
window.open(
dataToCsvURI(
[["name1", "city_name1"/*, ...*/], ["name2", "city_name2"/*, ...*/]]
)
);
如果有人在reactjs中需要这个,react-csv就在那里
如果有人需要这个敲除js,它的工作好基本上提出的解决方案:
html:
<a data-bind="attr: {download: filename, href: csvContent}">Download</a>
视图模型:
// for the download link
this.filename = ko.computed(function () {
return ko.unwrap(this.id) + '.csv';
}, this);
this.csvContent = ko.computed(function () {
if (!this.csvLink) {
var data = ko.unwrap(this.data),
ret = 'data:text/csv;charset=utf-8,';
ret += data.map(function (row) {
return row.join(',');
}).join('\n');
return encodeURI(ret);
}
}, this);