HTML excel export

Question

I am exporting a HTML table to and Excel format file and then downloading it as an .xls. This works fine in Firefox, Chrome etc. but not as expected in IE.

Below is the function I am using. The final if statement finds out if the browser is IE or otherwise.

function exportTable(obj) {
  var tab_text="<table border='2px'><tr>";
  var textRange; var j=0;
  tab = obj;


  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 you want links in your table
  tab_text= tab_text.replace(/<img[^>]*>/gi,""); // remove if you want images in your table
  tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // removes 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 = window.open();
      txtArea1.document.open("txt/html","replace");
      txtArea1.document.write(tab_text);
      txtArea1.document.close();
      txtArea1.focus(); 
      sa=txtArea1.document.execCommand("SaveAs",false,"export.xls");
      txtArea1.window.close()
  } else { //other browser not tested on IE 11
      sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));            
      return (sa);
  }
}

If it's IE, it creates a new window, writes the HTML output to it and then asks the user where to save the file. When the dialog appears, the user is forced to save the file as .html or .txt.

This is where it gets weird. Although the save as box forces the user to download it as either .html or .txt the file itself is saved as an .xls.

Is it possible to disable this prompt? Or is there another work around for this? I do not want the end user to be confused by this.

this could be interesting for you: https://github.com/koffsyrup/FileSaver.js or even this: http://stackoverflow.com/questions/11336663/how-to-make-a-browser-display-a-save-as-dialog-so-the-user-can-save-the-conten — messerbill, Dec 18 '15 at 14:46
You're not saving it as an .xls file, you're saving it as HTML with the filename .xls :-/ — Chuck Le Butt, Dec 18 '15 at 15:14

score 1 · Accepted Answer · answered Dec 18 '15 at 14:59

Try using a hidden iframe instead of a new window. That solved alot of issues for me. To support IE9, I ended up with this snippet:

if (event.data.browser !== 'IE') {
    $.util.open('data:application/vnd.ms-excel,' + event.data.content);
    return true;
}
else { 
    // The iframe already has to be included in the HTML, or you'll get a 'no access error'.
    frame.document.open("txt/html","replace");
    frame.document.write(event.data.content);
    frame.document.close();
    frame.focus(); 
    command = frame.document.execCommand("SaveAs", true, "data_table.xls");
    return command;                     
}

The only downside is that its not a 'real' excel .xls file yet until you open it the first time and resave it as a .xls This technique is just leveraging excels ability to understand basic html markup.

A better, but way more complicated method is to actually construct a base64 encoded 'string' as shown in msdn documentation, but in the end this sufficed for the project.

Or as with all things, there's lotsa libraries that will do this for you.

Using this method, it forces the user to save the file in order to view it, is there a way to view the excel usign "Open With" option? Like Example : jsfiddle.net/lesson8/jWAJ7 (in fiddle example : when the export button is clicked, the browser shows a dialog box with options open with and save file), so that the user can view the file without saving. Is there a way to get those options using the above method? Thanks in Advance! — Disera, Apr 20 '16 at 11:30

HTML excel export

1 Answers1