save html as xls - JS save dialog error

I am referring to the script posted by @bettelbursche from this topic: Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browse (Note: I cant reply there because I have not reached the minimum amount of postings needed)

I am trying to save a displayed HTML table only as XLS which is working, however, after clicking the Save button, the generated file is being named "download" (Chrome) or "unknown" (Safari), missing the file extension and also triggering a warning by Excel when opening the renamed download.xls file.

The problem seems to be in this line:

sa = txtArea1.document.execCommand("SaveAs", true, "DataTableExport.xls");

Full script below:

        <script>
    function fnExcelReport()
    {
        var tab_text = '<table border="1px" style="font-size:10px" ">';
        var textRange; 
        var j = 0;
        var tab = document.getElementById('export'); // id of table
        var lines = tab.rows.length;

        // the first headline of the table
        if (lines > 0) {
            tab_text = tab_text + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
        }

        // table data lines, loop starting from 1
        for (j = 1 ; j < lines; j++) {     
            tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</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
        // console.log(tab_text); // aktivate so see the result (press F12 in browser)

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

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

        return (sa);
    } 
    </script>

I suspected that Chrome depreciated the Save As dialogue but cannot find any documentation on that. Funny is that the problem is triggered across all browsers on both MAC / PC. Would appreciate some insight on this please ;)

Answers 1

  • Your issue is not on the line you identified. That piece of code is for Internet Explorer, as explained in the code comments.

    The issue is here:

    sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
    

    Nothing is telling the browser what to name the file and nothing establishes any file extension. You can fix this by implementing this answer or, even more related because you linked to the question originally, this answer into your code by replacing the line I've identified above is.

    To do that, replace:

     else // other browser not tested on IE 11
                sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));  
    

    With:

    else { // other browser not tested on IE 11
        var link = document.createElement('a');
        link.download = "DataTableExport.xls";
        link.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(tab_text);
        link.click();
    }
    

Related Articles