Excel export in JavaScript using Blob not working in FireFox

Question

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.

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

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

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.

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

Blob Code for exporting (not working in 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 · Accepted Answer · 2016-04-09 16:25:44Z

8

The answer to my question is as explained below.

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.

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 Code for exporting (this works in FireFox and 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);

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.

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'});

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.

Exporting Html to Excel in IE <= IE 11 including IE 8 and 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);
}

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

Empty Div needed when exporting in older IE browsers

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

edited Apr 9, 2016 at 16:25

answered Apr 8, 2016 at 14:36

Sunil

21.6k29 gold badges124 silver badges205 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Disera Over a year ago

Thanks Sunil, Using this method we are able to save the Excel right away, can you please tell, what should be done to give alert message for user to (open/save/saveAs) using these options. your help is much appreciated.

Sunil Over a year ago

@Disera, The Save File dialog is browser dependent. Older IE browsers should automatically popup this dialog. You don't need to write any code to show this dialog.

Disera Over a year ago

I use IE9 and i dont get this popup for (open/save/saveAs), i directly get the save dialog box. Can you please tell if i am going wrong anywhere?

Disera Over a year ago

And also, Can you please tell, is there any way to avoid a specific column <td></td> from being exported to excel, say by using it's id?

Sunil Over a year ago

@Disera, This dialog shows up in IE browser as well as other browsers. If your code is correct this dialog is automatically shown by the browser. If you are not seeing this dialog, then post your code and mention in which browser the dialog doesn't show. It has to be a mistake/bug in your code if you are not seeing this dialog.

|

Wenjia · Accepted Answer · 2016-04-13 14:24:46Z

1

You can try to add the anchor to the dom like this:

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

answered Apr 13, 2016 at 14:24

Wenjia

111 bronze badge

Comments

Citrullin · Accepted Answer · 2016-02-28 18:52:36Z

0

I know this trouble with Blob and CSV Export. My solution: Create an Array and POST it to a backend script. Then you can simply create a Excel, CSV, PDF etc.

answered Feb 28, 2016 at 18:52

Citrullin

2,32118 silver badges29 bronze badges

8 Comments

Sunil Over a year ago

I was looking for a client-side only solution in my case. Your approach will work but it would not be a 100% client-side approach.

Citrullin Over a year ago

What happen in Firefox?

Sunil Over a year ago

No error. It just goes through the blob code and does nothing. I just found the problem and posted the solution under UPDATE 1.

Disera Over a year ago

Is there a way to export excel (html table) without using Blob, since it's not supported in IE9 and lower versions. Please suggest an idea!Thanks.

Citrullin Over a year ago

Yep. Javascript Array -> HTTP POST to Backend Service -> Serialization -> to Excel

|

Collectives™ on Stack Overflow

Excel export in JavaScript using Blob not working in FireFox

3 Answers 3

11 Comments

Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related