Is there any way to export html table into Excel working in all browsers?

I used below code for that but its works only in Firefox. It also not allow customize exported file name. It takes a random file name.

 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" ><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, filename) {
            var OriginalHTML = $('#' + table + '').html();
            if (!table.nodeType) {

                table = document.getElementById(table);
                $(table).find(".EditColumns").remove();
            }
            var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
            $(table).html(OriginalHTML);

            //window.location.href = uri + base64(format(template, ctx))
            document.getElementById("aExportTable").href = uri + base64(format(template, ctx));
            document.getElementById("aExportTable").download = filename;
            document.getElementById("aExportTable").click();
            HighlightSelectedRow();
        }
    })();

Answers:

Answer

Try a blob. Should work in IE10+, Chrome/Safari and Fx

  window.URL = window.URL || window.webkitURL;
  var blob = new Blob([format(template, ctx)]); // format is part of OP's code
  var blobURL = window.URL.createObjectURL(blob);
  if (blobURL) {
    $("<a/>")
      .attr("href", blobURL)
      .attr("download", fileName)
      .text("Download "+fileName+" for import")
      .appendTo('#downloadLink');
  }
  else {
    $("#downloadLink").html("Please cut and paste from the table below");
  }  
Answer

The following code worked perfect for me with IE8+, Chrome and Firefox! It´s the easiest way to Export HTML tables to Excel without using a blob, ActiveX-Elements or downloadify:

Just insert an empty Iframe in your HTML document:

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

Add the following function to your Script section and replace the table id:

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

and finally call the function:

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

or with JQuery:

$("#btnExport").click(function () {

            fnExcelReport();
        });
Answer

The Firefox supports the HTML 5 feature data-uri here data:application

If you want to make it work across all browsers, better do it in server side and set the response ContentTypeaccordingly.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.