我正在尝试下载JavaScript计算的临时结果。假设我有一个字符串str
,我想下载包含str
的文件,并将其命名为data.csv
,我使用以下代码:
window.open('data:text/csv;charset=utf-8,' + str);
该文件可以成功下载,但如何自动命名文件data.csv
,而不是每次手动设置名称?
答案 0 :(得分:75)
您可以使用download
元素的<a>
属性来实现此目的。例如:
<a href="1251354216241621.txt" download="your-foo.txt">Download Your Foo</a>
此属性表示应下载文件(而不是显示,如果适用),并指定应该为下载的文件使用哪个文件名。
您可以使用window.open()
属性和download
生成不可见的链接,而不是使用.click()
。
var str = "Name, Price\nApple, 2\nOrange, 3";
var uri = 'data:text/csv;charset=utf-8,' + str;
var downloadLink = document.createElement("a");
downloadLink.href = uri;
downloadLink.download = "data.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
不幸的是,并非所有浏览器都支持此功能,但添加它不会让其他浏览器更糟糕:它们会继续使用无用的文件名下载文件。 (这假设您使用的MIME类型是他们的浏览器尝试下载的。如果您尝试让用户下载.html
文件而不是显示它,那么这对您不起作用在不受支持的浏览器中有任何好处。)
答案 1 :(得分:21)
这在最新的Chrome中不起作用,我已对其进行了修改,以下代码可以正常使用,
$("#download_1").click(function() {
var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]';
var json = $.parseJSON(json_pre);
var csv = JSON2CSV(json);
var downloadLink = document.createElement("a");
var blob = new Blob(["\ufeff", csv]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});
因此,当您单击download_1 id按钮时,它将创建一个不可见的下载链接并单击该链接。我用另一个函数来准备js。
JSON2CSV功能如下:
function JSON2CSV(objArray) {
var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
var str = '';
var line = '';
if ($("#labels").is(':checked')) {
var head = array[0];
if ($("#quote").is(':checked')) {
for (var index in array[0]) {
var value = index + "";
line += '"' + value.replace(/"/g, '""') + '",';
}
} else {
for (var index in array[0]) {
line += index + ',';
}
}
line = line.slice(0, -1);
str += line + '\r\n';
}
for (var i = 0; i < array.length; i++) {
var line = '';
if ($("#quote").is(':checked')) {
for (var index in array[i]) {
var value = array[i][index] + "";
line += '"' + value.replace(/"/g, '""') + '",';
}
} else {
for (var index in array[i]) {
line += array[i][index] + ',';
}
}
line = line.slice(0, -1);
str += line + '\r\n';
}
return str;
}
希望它能帮助别人:)
答案 2 :(得分:6)
IE的解决方案是使用msSaveBlob并传递文件名。
对于现代浏览器,解决方案是这样的,经过测试:IE11,FF&amp;铬
var csvData = new Blob([arg.data], {type: 'text/csv;charset=utf-8;'});
//IE11 & Edge
if (navigator.msSaveBlob) {
navigator.msSaveBlob(csvData, exportFilename);
} else {
//In FF link must be added to DOM to be clicked
var link = document.createElement('a');
link.href = window.URL.createObjectURL(csvData);
link.setAttribute('download', exportFilename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
关于here
有一个很好的讨论答案 3 :(得分:4)
接受的的较短版本(我的情况下必须使用unicode)
var link = document.createElement("a");
link.href = 'data:text/csv,' + encodeURIComponent("algún texto");
link.download = "Example.csv";
link.click();