我知道有很多这种性质的问题,但我需要使用JavaScript来做到这一点。我使用Dojo 1.8并在数组中拥有所有属性信息,它看起来像这样:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道我如何在客户端将此导出为CSV吗?
我知道有很多这种性质的问题,但我需要使用JavaScript来做到这一点。我使用Dojo 1.8并在数组中拥有所有属性信息,它看起来像这样:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道我如何在客户端将此导出为CSV吗?
当前回答
老问题,有很多好的答案,但这里有另一个简单的选择,它依赖于两个流行的库来完成。有些回答提到了Papa Parse,但在下载部分提供了自己的解决方案。结合Papa Parse和FileSaver.js,你可以尝试以下方法:
const dataString = Papa.unparse(data, config);
const blob = new Blob([dataString], { type: 'text/csv;charset=utf-8' });
FileSaver.saveAs(blob, 'myfile.csv');
这里描述了unparse的配置选项。
其他回答
我来这里是为了寻求更多的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。
基于上面的答案,我创建了这个函数,并在IE 11、Chrome 36和Firefox 29上进行了测试
function exportToCsv(filename, rows) {
var processRow = function (row) {
var finalVal = '';
for (var j = 0; j < row.length; j++) {
var innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
};
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0)
result = '"' + result + '"';
if (j > 0)
finalVal += ',';
finalVal += result;
}
return finalVal + '\n';
};
var csvFile = '';
for (var i = 0; i < rows.length; i++) {
csvFile += processRow(rows[i]);
}
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
例如: https://jsfiddle.net/jossef/m3rrLzk0/
如果有人需要这个敲除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);
一个极简但功能完整的解决方案:)
/** Convert a 2D array into a CSV string
*/
function arrayToCsv(data){
return data.map(row =>
row
.map(String) // convert every value to String
.map(v => v.replaceAll('"', '""')) // escape double colons
.map(v => `"${v}"`) // quote it
.join(',') // comma-separated
).join('\r\n'); // rows starting on new lines
}
例子:
let csv = arrayToCsv([
[1, '2', '"3"'],
[true, null, undefined],
]);
结果:
"1","2","""3"""
"true","null","undefined"
现在将其下载为文件:
/** Download contents as a file
* Source: https://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side
*/
function downloadBlob(content, filename, contentType) {
// Create a blob
var blob = new Blob([content], { type: contentType });
var url = URL.createObjectURL(blob);
// Create a link to download it
var pom = document.createElement('a');
pom.href = url;
pom.setAttribute('download', filename);
pom.click();
}
下载:
downloadBlob(csv, 'export.csv', 'text/csv;charset=utf-8;')
如果你正在寻找一个真正快速的解决方案,你也可以给这个小库一个机会,它将为你创建和下载CSV文件:https://github.com/mbrn/filefy
用法非常简单:
import { CsvBuilder } from 'filefy';
var csvBuilder = new CsvBuilder("user_list.csv")
.setColumns(["name", "surname"])
.addRow(["Eve", "Holt"])
.addRows([
["Charles", "Morris"],
["Tracey", "Ramos"]
])
.exportFile();