Html 数据中下载文件的文件名：Application/octet-stream；
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6955860/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Filename of downloaded file in data:Application/octet-stream;
提问by parbi
I am trying to download a file using data uri in following manner:
我正在尝试通过以下方式使用数据 uri 下载文件：
<input type="button"
onclick="window.location.href='data:Application/octet-stream;content-disposition:attachment;filename=file.txt,${details}'"
value="Download"/>
The problem is that the downloaded file is always named 'Unknown', whatever I try to use as filename. Is this the correct way to give the file a name ? or something else needs to be done ?
问题是下载的文件总是命名为“未知”，无论我尝试用作文件名。这是给文件命名的正确方法吗？还是需要做其他事情？
回答by Ashraf Bashir
Here's the solution, you just have to add a downloadattribute to anchor tag
awith desired name
这是解决方案，您只需将download属性添加到a具有所需名称的锚标记
<a href="data:application/csv;charset=utf-8,Col1%2CCol2%2CCol3%0AVal1%2CVal2%2CVal3%0AVal11%2CVal22%2CVal33%0AVal111%2CVal222%2CVal333"
download="somedata.csv">Example</a>
Another solution is to use JQuery/Javascript
另一种解决方案是使用 JQuery/Javascript
回答by malix
On Safari, you might want to use this, and instruct the user to ?-S the file:
在 Safari 上，您可能想要使用它，并指示用户 ?-S 文件：
window.open('data:text/csv;base64,' + encodeURI($window.btoa(content)));
Otherwise, this uses Filesaver.js, but works ok:
否则，这使用Filesaver.js，但工作正常：
var downloadFile = function downloadFile(content, filename) {
var supportsDownloadAttribute = 'download' in document.createElement('a');
if(supportsDownloadAttribute) {
var link = angular.element('<a/>');
link.attr({
href: 'data:attachment/csv;base64,' + encodeURI($window.btoa(content)),
target: '_blank',
download: filename
})[0].click();
$timeout(function() {
link.remove();
}, 50);
} else if(typeof safari !== 'undefined') {
window.open('data:attachment/csv;charset=utf-8,' + encodeURI(content));
} else {
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename);
}
}
Note: There is some AngularJS in the code above, but it should be easy to factor out...
注意：上面的代码中有一些 AngularJS，但应该很容易分解...
回答by Rick
For those that are using other libraries like angularjs or backbone, you can try something like this.
对于那些使用 angularjs 或主干等其他库的人，您可以尝试这样的事情。
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+$scope.data);
$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+$scope.data);
回答by Aral Roca
I had the same issue and finally I solved in all browsers serving the CSV file in the server-side:
我遇到了同样的问题，最后我在服务器端提供 CSV 文件的所有浏览器中解决了：
const result = json2csv({ data });
res.writeHead(200
'Content-Type': 'application/octet-stream',
'Content-Disposition': 'attachment;filename=issues.csv',
'Content-Length': result.length
});
res.end(result);
回答by Synedh
For anybody looking for a client-side solution using Javascript only, here is mine, working on any browser except IE 10 and lower (and Edge...why?!):
对于寻找仅使用 Javascript 的客户端解决方案的任何人来说，这是我的，在除 IE 10 及更低版本（以及 Edge ......为什么？！）之外的任何浏览器上工作：
var uri = 'data:application/csv;charset=UTF-8,' + encodeURIComponent(csv);
var link = document.createElement('a');
link.setAttribute("download", "extract.csv");
link.setAttribute("href", uri);
document.body.appendChild(link);
link.click();
body.removeChild(body.lastChild);
