使用Blob无法在FireFox中使用Excel导出JavaScript [英] Excel export in JavaScript using Blob not working in FireFox

问题描述

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

I have some JavaScript code as given under first code snippet, that works in latest Chrome but not in latest FireFox. This code is exporting data to xls file using Blob object. The strange thing is that in FireFox, the code does not throw any error but does nothing as it executes all the lines successfully i.e. no export happens.

此问题的演示在此URL： http://js.do/sun21170/84920

A demo for this question is at this URL: http://js.do/sun21170/84920

如果您在Chrome中运行上述演示中的代码，它将下载文件 newfile.xls （允许Chrome中的弹出窗口）。

If you run the code in above demo in Chrome, it will download the file newfile.xls ( allow popups in Chrome).

问题：我需要在下面给出的 Blob代码中进行哪些更改，以便制作它在FireFox中有效吗？我尝试使用键入：'application / octet-stream'以及键入：'text / plain'，但两者都是在FireFox中没有帮助。

Question: What change I need to make in Blob Code given below, in order to make it work in FireFox? I tried using type: 'application/octet-stream' and also type: 'text/plain', but both did not help in FireFox.

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

The variable table in code snippet below holds a string that is the html for rendering a table including html and body tags.

用于导出的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);

推荐答案

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

The answer to my question is as explained below.

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

The problem was that the line window.URL.revokeObjectURL(url) was being called too soon for FireFox to react to a.click() and show it's file dialog. So, I just added a delay by using setTimeout for the line window.URL.revokeObjectURL(url). This change made it work in FireFox. Of course, it worked in Chrome also.

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

The updated code is as below which has only one change in the last line of code. Also, the demo with this change that works in FireFox is: 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字符串。

While the above code works perfectly, I think when exporting to xls file, it's better to use type:'application/vnd.ms-excel even though the table variable holds a html string.

这个小改动使FireFox自动使用Excel作为打开导出文件的默认程序否则FireFox使用Laucnch Windows应用程序（默认）打开文件。我的笔记本电脑上的这个默认应用是边缘浏览器。

This small change makes FireFox automatically use Excel as the default program for opening the exported file else FireFox uses Laucnch Windows app (default) to open the file. This default app on my laptop was Edge browser.

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

如果你想在旧的IE浏览器中使用100％客户端方法，那么 Blob 对象无法使用，因为它在旧的IE浏览器中不可用，但您可以使用下面的代码片段中的其他方法。

If you would like to use 100% client-side approach in older IE browsers, then Blob object cannot be used since it's not available in older IE browsers, but you can use another approach as in code snippet below.

在IE中将Html导出到Excel< = 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特定代码正常工作，请在页面标记中添加以下内容。

For above IE specific code to work, add following to your page markup.

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

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

这篇关于使用Blob无法在FireFox中使用Excel导出JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！