Export the HTML table to excel is not working in IE

Question

Exporting HTML table to Excel is working fine in Chrome and Firefox but it is not working in Internet Explorer 10.

var tableToExcel = (function() {
  var uri = 'data:application/vnd.ms-excel;base64,',
      template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
      base64 = function(s) {
        return window.btoa(unescape(encodeURIComponent(s)))
      },
      format = function(s, c) {
        return s.replace(/{(\w+)}/g, function(m, p) {
          return c[p];
        })
      }
  return function(table, name) {
    if (!table.nodeType) table = document.getElementById(table)
    var ctx = {
      worksheet: name || 'Worksheet',
      table: table.innerHTML
    }
    window.location.href = uri + base64(format(template, ctx))
  }
})()

score 16 · Accepted Answer · edited Feb 08 '18 at 18:03

Excel Export Script works on IE7+ Mozilla & Chrome ===========================================================

function fnExcelReport()
{
  var tab_text="<table border='2px'><tr bgcolor='#87AFC6'>";
  var textRange; var j=0;
  tab = document.getElementById('headerTable'); // id of table


  for(j = 0 ; j < tab.rows.length ; j++)
  {
    tab_text=tab_text+tab.rows[j].innerHTML+"</tr>";
    //tab_text=tab_text+"</tr>";
  }

  tab_text=tab_text+"</table>";
  tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
  tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if u want images in your table
  tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params

  var ua = window.navigator.userAgent;
  var msie = ua.indexOf("MSIE ");

  if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
  {
    txtArea1.document.open("txt/html","replace");
    txtArea1.document.write(tab_text);
    txtArea1.document.close();
    txtArea1.focus();
    sa=txtArea1.document.execCommand("SaveAs",true,"Say Thanks to Sumit.xls");
  }
  else                 //other browser not tested on IE 11
  sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));


  return (sa);
}

Just Create a blank iframe

<iframe id="txtArea1" style="display:none"></iframe>

Call this function on

<button id="btnExport" onclick="fnExcelReport();"> EXPORT </button>

JSFiddle (Note only tested in IE 10): http://jsfiddle.net/x0av0ax5/1/

It is working fine in IE 11. But after exporting, when I open the xls file, it shows a warning message saying: "The file format and extension does not match. The file could be corrupted or unsafe... do you want to open it anyway?" If I press yes the excel is opened perfectly. Could you have any clue to prevent the warning message ??? — Abdur Rahman, Feb 23 '16 at 14:28
@Abdur Rahman: This warning is from excel application and it is because we are saving data in old excel format(tab separated). In case you wish have it in the latest excel format, you will have to write some kind of server code and attach the file to the response because no client side script works perfectly well for new encodings. — sampopes, Feb 24 '16 at 09:52
Thanks sampopes. If anyone find any client side script to prevent the warning please share it for others. — Abdur Rahman, Feb 28 '16 at 07:13

score 2 · Answer 2 · edited Jan 07 '16 at 07:50

Please see this plugin which uses BLOB. https://github.com/rainabba/jquery-table2excel

if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
  if (typeof Blob !== "undefined") {
    //use blobs if we can
    tab_text = [tab_text];
    //convert to array
    var blob1 = new Blob(tab_text, {
      type: "text/html"
    });
    window.navigator.msSaveBlob(blob1, "download.xls");
  } else {
    txtArea1.document.open("txt/html", "replace");
    txtArea1.document.write(tab_text);
    txtArea1.document.close();
    txtArea1.focus();
    sa = txtArea1.document.execCommand("SaveAs", true, "download.xls");
    return (sa);
  }
} 

else
  window.location.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(tab_text);

Allen Chak · Answer 3 · 2014-03-28T09:49:21.570

0

data uri does not support IE, maybe you post your excel xml data to server to generate the file.

And you can use Downloadify (Flash) to generate the file.

https://github.com/dcneiner/Downloadify

edited Mar 28 '14 at 09:49

answered Mar 28 '14 at 09:43

Allen Chak

1,802
1
10
21

Firstly, there are example in GitHub, and please revise the question with any code you tried which are not working / error. Thanks – Allen Chak Mar 31 '14 at 02:45

score 0 · Answer 4 · answered Oct 09 '18 at 03:10

Found a community version of SheetJS that works like a cham!

No warning like "The file format and extension of 'file.xls' don't match. This file could be corrupted or unsafe."

Import the library

    <script src="../Scripts/xlsx.full.min.js"></script>

Paste the function that calls the library

function doit(type, fn, dl) {
        var elt = document.getElementById('data-table');
        var wb = XLSX.utils.table_to_book(elt, { sheet: "Sheet JS" });
        return dl ?
            XLSX.write(wb, { bookType: type, bookSST: true, type: 'base64' }) :
            XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
    }

Trigger the function using a button or anything that suit your needs.

<button id="btnExport" onclick="doit('xlsx');"> EXPORT </button>

Sample code can be found in this page

Export the HTML table to excel is not working in IE

4 Answers4

Linked