我知道有很多这种性质的问题,但我需要使用 JavaScript 来做到这一点。我正在使用Dojo 1.8
并拥有数组中的所有属性信息,如下所示:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道如何将其导出到CSV
客户端吗?
我知道有很多这种性质的问题,但我需要使用 JavaScript 来做到这一点。我正在使用Dojo 1.8
并拥有数组中的所有属性信息,如下所示:
[["name1", "city_name1", ...]["name2", "city_name2", ...]]
知道如何将其导出到CSV
客户端吗?
您可以在本机 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");
然后您可以使用 JavaScriptwindow.open
和encodeURI
函数来下载 CSV 文件,如下所示:
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);
window.open
方法访问数据 URI 。为了实现这一点,您可以创建一个隐藏的<a>
DOM 节点并设置其download
属性如下:
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".
基于上面的答案,我创建了这个功能,我在 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);
}
}
}
此解决方案应适用于Internet Explorer 10+、Edge、旧版和新版Chrome、FireFox、Safari、++
接受的答案不适用于 IE 和 Safari。
// Example data given in question text
var data = [
['name1', 'city1', 'some other info'],
['name2', 'city2', 'more info']
];
// Building the CSV from the Data two-dimensional array
// Each column is separated by ";" and new line "\n" for next row
var csvContent = '';
data.forEach(function(infoArray, index) {
dataString = infoArray.join(';');
csvContent += index < data.length ? dataString + '\n' : dataString;
});
// The download function takes a CSV string, the filename and mimeType as parameters
// Scroll/look down at the bottom of this snippet to see how download is called
var download = function(content, fileName, mimeType) {
var a = document.createElement('a');
mimeType = mimeType || 'application/octet-stream';
if (navigator.msSaveBlob) { // IE10
navigator.msSaveBlob(new Blob([content], {
type: mimeType
}), fileName);
} else if (URL && 'download' in a) { //html5 A[download]
a.href = URL.createObjectURL(new Blob([content], {
type: mimeType
}));
a.setAttribute('download', fileName);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
location.href = 'data:application/octet-stream,' + encodeURIComponent(content); // only this mime type is supported
}
}
download(csvContent, 'dowload.csv', 'text/csv;encoding:utf-8');
运行代码片段会将模拟数据下载为 csv
感谢 dandavis https://stackoverflow.com/a/16377813/1350598
我来这里是为了寻求更多的 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
.
在 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();