Excel 使用 Blob 在 JavaScript 中导出在 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 用于呈现 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

我知道 Blob 和 CSV 导出有这个问题。我的解决方案：创建一个数组并将其 POST 到后端脚本。然后您可以简单地创建 Excel、CSV、PDF 等

Answer 2

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

问题是 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 即使 table 变量保持不变一个 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>

Answer 3

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

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

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

Excel export in JavaScript using Blob not working in FireFox

javascript

excel

firefox

export-to-excel