Search code examples
javascripthtmlexcelhtml-tableexport-to-excel

HTML Table - Excel Export Not Working Google Chrome and IE

Im having issue in exporting the HTML table on IE and Google chrome browsers, The table has 2513 Lines of table data. I read on the Form google chrome has a bug for URL limiting.

If i remove some content from the table and make it below 2200 lines the export to excel is working .

But for the current table which has 2600 lines the export to excel opens only a blank page on google chrome

Below is my export to excel function & code. could you advise me the fix / workaround for IE and Chrome Browser

The Server is running IBM HTTP APP server 

<br>
<head>

        <title> Server Data</title>

</head>




<br>
<h1 align=center style=color:#DC143C> Servers data</h1>
<br>
<br>
<br>

<input type="button" value="Export to Excel" style="font-size:12pt;color:white;background-color:green;border:5px solid #336600;padding:3px;float: left;" onclick="exportToExcel('exTable')" />
<br>
<iframe id="txtArea1" style="display:none"></iframe>
<br>
<br>


<script>
        function exportToExcel(tableID){
            var tab_text="<table border='2px'><tr bgcolor='#87AFC6' style='height: 75px; text-align: center; width: 250px'>";
            var textRange; var j=0;
            tab = document.getElementById(tableID); // id of table

        for(j = 0 ; j < tab.rows.length ; j++)
        {

            tab_text=tab_text;
            tab_text=tab_text+tab.rows[j].innerHTML.toUpperCase()+"</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, ""); //remove input params

            var ua = window.navigator.userAgent;
            var msie = ua.indexOf("MSIE ");
            base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s)))},
                format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) {
                return c[p]; }) }
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
        {
                txtArea1.document.open("txt/html","replace");
                txtArea1.document.write( '\r\n' + tab_text);
                txtArea1.document.close();
                txtArea1.focus();
                sa=txtArea1.document.execCommand("SaveAs",true,"download.xls");
        }
        else {
            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]--><meta http-equiv="content-type" content="text/plain; charset=UTF-8"/></head><body><table>{table}</table></body></html>'
            var ctx = { worksheet: name || 'Worksheet', table:tab_text }
            sa = window.open('data:application/vnd.ms-excel;base64,' +base64(format(template, ctx)));
        }

            return (sa);
    }
</script>

Chromes opens a blank page on click to export to excel

Solution

  • I created a JavaScript library to deal with exporting to Excel on the client side: https://github.com/jmaister/excellentexport/

    Simple usage:

    <a download="somedata.xls" href="#" onclick="return ExcellentExport.excel(this, 'datatable', 'Sheet Name Here');">Export to Excel</a>

    For XLSX and more than one sheet:

    <a download="somedata.xlsx" 
    href="#" 
    onclick="return ExcellentExport.convert({ anchor: this, filename: 'data_123.array', format: 'xlsx'},[{name: 'Sheet Name Here 1', from: {table: 'datatable'}}]);">
Export to CSV</a>