save html as xls - JS save dialog error

Question

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

Related: [Is there any way to specify a suggested filename when using data: URI?](http://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri) — jeremy, Mar 27 '16 at 07:57
Does not initiate the JS function, no reaction after clicking on the link. — Armitage2k, Mar 27 '16 at 08:07

score 0 · Accepted Answer · edited May 23 '17 at 12:31

0

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

edited May 23 '17 at 12:31

Community

1
1

answered Mar 27 '16 at 08:00

jeremy

9,965
4
39
59

I can live with the excel warning message, but how can I define the filename and extension for the above code? – Armitage2k Mar 27 '16 at 08:10
@Armitage2k Check the second answer I linked to. – jeremy Mar 27 '16 at 08:11
I did run the script in the second answer but all that does is create an empty excel file. The problem I have is I dont know how to tell that script that I has to get the content from .
– Armitage2k Mar 27 '16 at 08:16
Thanks!! Using IE<=9 The above code is forcing the user to save the excel, before viewing it. It will be very useful, if there a way to view the excel using "Open With" option, so that the file can be view without saving it? Like Example : jsfiddle.net/lesson8/jWAJ7 (in example fiddle- when the export button is clicked, the browser shows a dialog box with options open with and save file) Thanks in Advance. – Disera Apr 20 '16 at 11:39

save html as xls - JS save dialog error

1 Answers1