使用Blob无法在FireFox中使用Excel导出JavaScript

Question

我在第一个代码段下给出了一些JavaScript代码,它可以在最新的Chrome中使用,但不能在最新的FireFox中使用.此代码xls使用Blob对象将数据导出到文件.奇怪的是,在FireFox中,代码不会抛出任何错误,但不会执行任何操作,因为它会成功执行所有行,即不会导出任何导出.

此问题的演示位于以下URL:http://js.do/sun21170/84920

如果您在Chrome中运行上述演示中的代码,它将下载该文件newfile.xls(允许Chrome中的弹出窗口).

问题:Blob Code为了使其在FireFox中运行,我需要在下面给出哪些更改？我尝试使用type: 'application/octet-stream'也type: 'text/plain',但两人都没有在Firefox帮助.

下面table的代码片段中的变量包含一个字符串,该字符串是用于呈现包含html和body标签的表的html.

用于导出的Blob代码(不在FireFox中工作)

 //export data in Chrome or FireFox
 //this works in Chrome but not in FireFox
 //also no errors in firefox
 sa = true;
 var myBlob =  new Blob( [table] , {type:'text/html'});
 var url = window.URL.createObjectURL(myBlob);
 var a = document.createElement("a");
 document.body.appendChild(a);
 a.href = url;
 a.download = "newfile.xls";
 a.click();
 window.URL.revokeObjectURL(url);

Answer 1

我的问题的答案如下所述.

问题是,为了让FireFox对a.click()做出反应并显示它的文件对话框,很快就调用了行window.URL.revokeObjectURL(url).所以,我刚刚使用setTimeout为行window.URL.revokeObjectURL(url)添加了一个延迟.此更改使其在FireFox中可用.当然,它也适用于Chrome.

更新后的代码如下所示,最后一行代码只有一处变化.此外,在FireFox中使用此更改的演示是:http://js.do/sun21170/84977

用于导出的Blob代码(适用于FireFox和Chrome)

 //export data in Chrome or FireFox
 //this works in Chrome as well as in FireFox
 sa = true;
 var myBlob =  new Blob( [table] , {type:'text/html'});
 var url = window.URL.createObjectURL(myBlob);
 var a = document.createElement("a");
 document.body.appendChild(a);
 a.href = url;
 a.download = "newfile.xls";
 a.click();
//adding some delay in removing the dynamically created link solved the problem in FireFox
 setTimeout(function() {window.URL.revokeObjectURL(url);},0);

虽然上面的代码运行完美,但我认为在导出到xls文件时,最好使用类型:'application/vnd.ms-excel,即使表变量包含html字符串.

这个小改动使FireFox自动使用Excel作为打开导出文件的默认程序,否则FireFox使用Laucnch Windows应用程序(默认)打开文件.我的笔记本电脑上的默认应用是Edge浏览器.

var myBlob =  new Blob( [table] , {type:'application/vnd.ms-excel'});

如果您想在较旧的IE浏览器中使用100%客户端方法,则Blob无法使用对象,因为它在较旧的IE浏览器中不可用,但您可以使用另一种方法,如下面的代码片段中所示.

在IE <= IE 11中将Html导出到Excel,包括IE 8和IE 9

function ExportTabletoExcelInOldIE(table) 
{
 //table variable contains the html to be exported to Excel
 var sa = null;
 var ua = window.navigator.userAgent;
 var msie = ua.indexOf("MSIE ");
 if (msie > 0)  // If old Internet Explorer including IE 8
    {
        //make sure you have an empty div with id of iframeDiv in your page
        document.getElementById('iframeDiv').innerHTML = '<iframe id="txtArea1" style="display:none"></iframe>';
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(table);
        txtArea1.document.close();
        txtArea1.focus();
        sa = txtArea1.document.execCommand("SaveAs", true, "DataExport.xls");
        document.getElementById('iframeDiv').innerHTML = "";
    }
 return (sa);
}

要使上述IE特定代码起作用,请在页面标记中添加以下内容.

在较旧的IE浏览器中导出时需要空Div

<div id='iframeDiv'></div>