Question

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

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

如果您在Chrome中运行上述演示中的代码，则会下载文件newfile.xls（允许在Chrome中弹出广告）。

问题：为了使其在FireFox中运行，我需要在下面的Blob Code中进行哪些更改？我尝试使用type: 'application/octet-stream'和type: 'text/plain'，但两者都没有帮助FireFox。

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

用于导出的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文件时，最好使用type：'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中将Html导出到Excel＆lt; = IE 11，包括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>

Answer 2

您可以尝试将锚点添加到dom中：

document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Answer 3

我知道Blob和CSV导出的这个问题。我的解决方案：创建一个数组并将其发布到后端脚本。然后，您只需创建Excel，CSV，PDF等。

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

3 个答案: