使用Internet Explorer下载动态CSV文件

Question

以下代码在火狐和谷歌浏览器中都能正常工作，但在IE中无法运行。本质上，我有一个JSON对象，它被转换成一个数组，然后以CSV格式输出。在火狐或谷歌浏览器中点击按钮时，文件会被下载或者另存为窗口会打开，但在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));
});

顺便说一下，我正在使用Windows 8中的IE 11进行测试，如果这有区别的话。

谢谢大家！

- Sergio B

---

给它一个宽度。window.open('example.com', 'foo', 'width=1000'); - epascarello

这里是打字错误还是你漏了 $ 符号？ ("#csvbtn") 应该是 $("#csvbtn") 或者 jQuery("#csvbtn")。你的控制台有什么提示吗？有任何错误吗？ - gearsdigital

实际上，是 'foo' 使其工作... window.open 需要第二个参数作为窗口名称。 - rfornal

我尝试了这个以及其他几个类似的排列组合，现在我只得到一个空白窗口 window.open('','Receipts.csv','width=1000',"data:text/csv;charset=utf-8," + escape(csv));。 - Sergio B

@user2797021 请查看帖子。谢谢。 - guest271314

Answer 1

这是我的解决方案，以便其他人寻找解决方案。现在它可以在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);
        }           
    }

现在我只需要找出是否有一种方法可以弹出“另存为”屏幕而不是自动保存文件。如果有人知道答案，请分享。目前我的用户将不得不使用此功能。

感谢所有的答案，你们都很棒。

- Sergio B

Answer 2

为了安全起见，Internet Explorer不允许将数据URI用作可导航内容。要了解原因，建议您阅读Henning Klevjer关于此主题的简短白皮书“Phishing by data URI”。简而言之，这已被证明会打开欺骗最终用户放弃敏感信息的途径。

此外，在MSDN上的数据协议文档中：

出于安全考虑，数据URI仅限于下载资源。数据URI不能用于导航、脚本或填充框架或IFrame元素。

老实说，将数据URI传递给window.open感觉有点耍小聪明。相反，您应该使用API来处理此过程（如果提供了API）。如果您想在Internet Explorer中将文件下载到用户的计算机上，请考虑使用navigator.msSaveBlob或navigator.msSaveOrOpenBlob。

例如，请考虑以下内容：

if ( window.navigator.msSaveOrOpenBlob && window.Blob ) {
    var blob = new Blob( [ "A,B\nC,D" ], { type: "text/csv" } );
    navigator.msSaveOrOpenBlob( blob, "strings.csv" );
}

- Sampson

---

在这种情况下，我如何能够完成动态CSV文件的下载？我需要使用另一种技术吗，还是这只是微软为解决手头问题的所有漏洞提供一个统一修复的情况之一？ - Sergio B

@user2797021 Internet Explorer支持一些API将下载传递给用户；我已经更新了我的答案，包括这些内容。 - Sampson