使用Blob在JavaScript中导出Excel不工作在FireFox中
我有一些JavaScript代码在第一个代码片段下给出，可以在最新的Chrome中使用，但不能在最新的FireFox中使用。 此代码使用Blob对象将数据导出到xls文件。 奇怪的是，在FireFox中，代码不会抛出任何错误，但什么都不做，因为它成功执行所有行，即不导出。
这个问题的演示是在这个URL： http : //js.do/sun21170/84920
如果您在Chrome上面的演示中运行代码，它将下载文件newfile.xls （允许在Chrome中popup）。
问题 ：为了使它在FireFox中工作，我需要在Blob Code做出什么改变？ 我尝试使用type: 'application/octet-stream' ，并type: 'text/plain' ，但两者在FireFox中都没有帮助。
下面的代码片段中的variablestable包含一个string，该string是用于呈现包括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);
我的问题的答案如下所述。
问题在于window.URL.revokeObjectURL（url）被调用的太快，FireFox对a.click（）作出反应并显示它的文件对话框。 所以，我只是使用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文件时，最好使用type：'application / vnd.ms-excel，即使tablevariables包含一个htmlstring。
这个小的改变使得FireFox自动使用Excel作为打开导出文件的默认程序，否则FireFox使用Laucnch Windows应用程序（默认）来打开文件。 我的笔记本上的这个默认应用程序是Edge浏览器
var myBlob = new Blob( [table] , {type:'application/vnd.ms-excel'});
如果你想在旧的IE浏览器中使用100％的客户端方法，那么Blob对象就不能使用，因为它在旧的IE浏览器中不可用，但是你可以使用另一种方法，如下面的代码片段所示。
在IE <= IE 11（包括IE 8和IE 9）中将Html导出为Excel
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>
我知道Blob和CSV导出这个麻烦。 我的解决scheme：创build一个数组并将其发布到后端脚本。 那么你可以简单地创build一个Excel，CSV，PDF等
你可以试着把这个锚点添加到这个dom中：
document.body.appendChild(a); a.click(); document.body.removeChild(a);