javascript 在 Internet Explorer 中下载动态 CSV
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27257336/
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
Downloading a Dynamic CSV in Internet Explorer
提问by Sergio B
The following code works in both FireFox and Chrome, but not IE. Essentially, I have a JSON object which gets converted into an array and then to a csv format, when I click the button in FF or Chrome the file gets downloaded or the Save Aswindow opens, but in IE a new tab opens up. In a perfect world IE would not exists, but in the real world we have to make it work, lol.
以下代码适用于 FireFox 和 Chrome，但不适用于 IE。本质上，我有一个 JSON 对象，它被转换为数组，然后转换为 csv 格式，当我单击 FF 或 Chrome 中的按钮时，文件被下载或另存为窗口打开，但在 IE 中会打开一个新选项卡。在一个完美的世界里，IE 不会存在，但在现实世界中，我们必须让它工作，哈哈。
$("#csvbtn").click(function(e){
e.preventDefault();
var json_obj= JSON.parse(result);
var csv = JSON2CSV(json_obj);
window.open("data:text/csv;charset=utf-8," + escape(csv));
});
BTW, I am using IE 11 in windows 8 to test this, if that makes a difference.
顺便说一句，我在 Windows 8 中使用 IE 11 来测试这个，如果这有区别的话。
Thanks all!
谢谢大家！
回答by Sergio B
This is my solution in case someone else is looking for a solution. now it works with FF, Chrome , and IE
这是我的解决方案，以防其他人正在寻找解决方案。现在它适用于 FF、Chrome 和 IE
var csv = JSON2CSV(json_obj);
var blob = new Blob([csv],{type: "text/csv;charset=utf-8;"});
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, "csvname.csv")
} 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", "csvname.csv");
link.style = "visibility:hidden";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
Now I just need to figure out if there is a way to have the save as screen pop up instead of automatically saving the file. If anybody knows the answer to that please share. For now my users will have to use this functionality.
现在我只需要弄清楚是否有办法让另存为屏幕弹出而不是自动保存文件。如果有人知道答案，请分享。现在我的用户将不得不使用这个功能。
Thanks all for all the great answers, you guys are awesome.
谢谢大家的精彩回答，你们真棒。
回答by Sampson
Internet Explorer does not permit data URIs as navigable content, for security purposes. To understand why, I would encourage you to read Henning Klevjer's short white-paper on the topic, Phishing by data URI. In summary, this has been demonstrated to open up avenues by which the end-user could be tricked into giving up sensitive information.
出于安全考虑，Internet Explorer 不允许将数据 URI 作为可导航内容。要了解原因，我建议您阅读 Henning Klevjer 的简短白皮书，主题是通过数据 URI 进行网络钓鱼。总之，这已被证明为最终用户可能被诱骗放弃敏感信息开辟了道路。
Also, from the data Protocol documentation on MSDN:
For security reasons, data URIs are restricted to downloaded resources. Data URIs cannot be used for navigation, for scripting, or to populate frame or iframe elements.
出于安全原因，数据 URI 仅限于下载的资源。数据 URI 不能用于导航、脚本编写或填充框架或 iframe 元素。
To be honest, passing a data URI to window.openfeels a bit hacky. Instead, you should use an API to handle the process (provided one exists). If you'd like to download a file to the user's machine in Internet Explorer, consider using navigator.msSaveBlobor navigator.msSaveOrOpenBlob.
老实说，将数据 URI 传递给window.open感觉有点 hacky。相反，您应该使用 API 来处理该过程（如果存在）。如果您想在 Internet Explorer 中将文件下载到用户的计算机，请考虑使用navigator.msSaveBlob或navigator.msSaveOrOpenBlob。
As an example, consider the following:
例如，请考虑以下情况：
if ( window.navigator.msSaveOrOpenBlob && window.Blob ) {
var blob = new Blob( [ "A,B\nC,D" ], { type: "text/csv" } );
navigator.msSaveOrOpenBlob( blob, "strings.csv" );
}
