Question

以下代码适用于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，我在Windows 8中使用IE 11来测试它，如果这有所不同。

全部谢谢！

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);
        }           
    }

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

感谢大家的所有好评，你们真棒。

Answer 2

出于安全考虑，Internet Explorer不允许将数据URI用作可导航内容。为了理解原因，我建议您阅读Henning Klevjer关于该主题的简短白皮书Phishing by data URI。总而言之，这已被证明可以开辟最终用户被欺骗放弃敏感信息的途径。

另外，来自data Protocol documentation on MSDN：

出于安全原因，数据URI仅限于下载的资源。数据URI不能用于导航，脚本编写或填充框架或iframe元素。

老实说，将数据URI传递给window.open会让人觉得有点笨拙。相反，您应该使用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" );
}

在Internet Explorer中下载动态CSV

2 个答案: