Export multiple HTML tables to Excel with JavaScript function

Question

I'm trying to export several tables from HTML code to excel, I found a function here on Stack Overflow, and it works perfectly with one table, but I'm trying to made the change so it can export with several tables, I have been trying with no luck, here is my code.

<script type="text/javascript">
function tableToExcel(name) {
        var tables=[];
        r('div[id^="reportesTablaExcel"]').each(function(){
            tables.push(r(this).attr('id'));
        });
        console.log(tables);
        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" 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>'
        , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
        var i;
        for (i = 0; i < tables.length; ++i) {

            var table = tables[i];

            if (!table.nodeType) table = document.getElementById(table)
            var ctx = {worksheet: name || 'Worksheet', table: eval(tables[+i+]).innerHTML}
            window.location.href = uri + base64(format(template, ctx))

            console.log();

        }

    return window.location.href;
}

<input style="display:none;" type="button" id="exportarExcel" onclick="tableToExcel('W3C Example Table')" value="Export to Excel">

reason could be that you trigger window.location.href changes in a loop... (not sure though) how about preparing the urls and add one anchor per table export it so you only do the location.href change once? it would be good if you could also add the original stackoverflow resource you incorporated — Tobias Krogh
– Tobias Krogh, Commented Oct 21, 2013 at 2:35

Solar Confinement · Accepted Answer · 2013-10-21 15:05:30Z

2

at the end i did it like this:

function tableToExcel(name) {
        var tables=[];
        r('div[id^="reportesTablaExcel"]').each(function(){
            tables.push(r(this).attr('id'));
        });

        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" 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>'
        , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
        , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
        var i;
        completeTables=[];
        for (i = 0; i < tables.length; ++i) {
            var table = tables[i];
            completeTables.push(r("#reportesTablaExcel"+i).html());
        }
        if (!table.nodeType) table = table
            var ctx = {worksheet: name || 'Worksheet', table: completeTables}
            window.location.href = uri + base64(format(template, ctx))

    return window.location.href;
}

answered Oct 21, 2013 at 15:05

Solar Confinement

2,2893 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rainabba Over a year ago

Did you or did he? gist.github.com/insin/1031969 I'm wonding because if I should be giving you credit and not him I'd like to know when I publish github.com/rainabba/jquery-table2excel (with MUCH cleaned up code).

Pankaj Upadhyay · Accepted Answer · 2020-02-13 08:21:16Z

tablesToExcel(e){
        var tab_text = document.getElementById("MsoNormalTable").outerHTML+document.getElementById("MsoNormalTable2").outerHTML;
        var textRange; var j = 0;
        var sa;

        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");
        var txt = document.getElementById('txtArea1').contentWindow;
        if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))      // If Internet Explorer
        {
            txt.document.open("txt/html", "replace");
            txt.document.write(tab_text);
            txt.document.close();
            txt.focus();
            sa = txt.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
        }
        else   
            sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
        return (sa);
    }


<table id="MsoNormalTable">
        <tr>
            <th>sampleT1</th>
            <th>sampleT1</th>
            <th>sampleT1</th>
        </tr>
        <tr>
            <td>sampleV1</td>
            <td>sampleV1</td>
            <td>sampleV1</td>
        </tr>
    </table>
    <table id="MsoNormalTable2">
        <tr>
            <th>sampleT2</th>
            <th>sampleT2</th>
            <th>sampleT2</th>
        </tr>
        <tr>
            <td>sampleV2</td>
            <td>sampleV2</td>
            <td>sampleV2</td>
        </tr>
    </table>
    <button onClick={this.tablesToExcel.bind(this)} className="btn btn-primary"><i className="fa fa-download"></i> Export all to excel</button>
    <iframe id="txtArea1" className="displayNo"></iframe>

Collectives™ on Stack Overflow

Export multiple HTML tables to Excel with JavaScript function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related