使用 Blob 在 JavaScript 中导出 Excel 在 FireFox 中不起作用

Question

我在第一个代码片段下给出了一些 JavaScript 代码，它在最新的 Chrome 中有效，但在最新的 FireFox 中无效。此代码使用 Blob 对象将数据导出到 xls 文件。奇怪的是，在 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);

原文由 Sunil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

问题是 window.URL.revokeObjectURL(url) 行被调用得太早，FireFox 无法对 a.click() 做出反应并显示它的文件对话框。因此，我只是通过对行 window.URL.revokeObjectURL(url) 使用 setTimeout 添加了一个延迟。此更改使其在 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 <= 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>

原文由 Sunil 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以尝试像这样将锚点添加到 dom：

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

原文由 Wenjia 发布，翻译遵循 CC BY-SA 3.0 许可协议