Javascript code explanation - export multiple html tables to excel

Question

Could someone explain to me line by line (or reference a link) to help me understand how to export multiple html tables to excel?

My original question was: How do you export multiple tables to excel into separate worksheets (but some grouped together)? Ex. Table A,B,C,D. I would like to have A and B in 1 worksheet and C and D in another worksheet and all the worksheets packed together in 1 excel file.

I was looking at the other questions on Stack Overflow and found this one question that was similar to my question ("How do I export multiple html tables to excel?" asked by dotnetN00b) The best answer for the question wrote this and the HTML code. I'm having some trouble understanding what each line is doing.

If someone could explain it to me or redirect me to a site to help me learn what I need to understand it that would be greatly appreciated!

The source of the Javascript and HTML code: How do I export multiple html tables to excel?

The Javscript code:

var tablesToExcel = (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" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets>'
    , templateend = '</x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>'
    , body = '<body>'
    , tablevar = '<table>{table'
    , tablevarend = '}</table>'
    , bodyend = '</body></html>'
    , worksheet = '<x:ExcelWorksheet><x:Name>'
    , worksheetend = '</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>'
    , worksheetvar = '{worksheet'
    , worksheetvarend = '}'
    , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
    , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
    , wstemplate = ''
    , tabletemplate = '';

    return function (table, name, filename) {
        var tables = table;

        for (var i = 0; i < tables.length; ++i) {
            wstemplate += worksheet + worksheetvar + i + worksheetvarend + worksheetend;
            tabletemplate += tablevar + i + tablevarend;
        }

        var allTemplate = template + wstemplate + templateend;
        var allWorksheet = body + tabletemplate + bodyend;
        var allOfIt = allTemplate + allWorksheet;

        var ctx = {};
        for (var j = 0; j < tables.length; ++j) {
            ctx['worksheet' + j] = name[j];
        }

        for (var k = 0; k < tables.length; ++k) {
            var exceltable;
            if (!tables[k].nodeType) exceltable = document.getElementById(tables[k]);
            ctx['table' + k] = exceltable.innerHTML;
        }

        //document.getElementById("dlink").href = uri + base64(format(template, ctx));
        //document.getElementById("dlink").download = filename;
        //document.getElementById("dlink").click();

        window.location.href = uri + base64(format(allOfIt, ctx));

    }
})();

The HTML code:

<html>
    <head>
        <title>JS to Excel</title>

    </head>
    <body>
        <table id="1">
            <tr><td>Hi</td></tr>
            <tr><td>Hey</td></tr>
            <tr><td>Hello</td></tr>
        </table>
        <table id="2">
            <tr><td>Night</td></tr>
            <tr><td>Evening</td></tr>
            <tr><td>Nite</td></tr>
        </table>

        <a id="dlink"  style="display:none;"></a>
        <input type="button" onclick="tablesToExcel(['1', '2'], ['first', 'second'], 'myfile.xls')" value="Export to Excel">
        <script src="~/Views/JS/JSExcel.js" type="text/javascript"></script>
    </body>
</html>

To break this down with an explanation you need to understand `JavaScript`. I have added your code to a [JsFiddle](http://jsfiddle.net/Webby2014/4j32uhx4/) this should help up. — Matt D. Webb, Apr 16 '15 at 21:00

score 0 · Answer 1 · answered Apr 17 '15 at 12:39

Essentially, it is looping through your HTML tables and building Excel compatible XML that represents the tables in a format Excel can support. I looked at the original question and also just looking at the code, there is no way this is cross-browser compatible. If you're lucky it will work in FireFox and Chrome, but definitely not IE.

That's a pretty good explanation of what it's doing, if you truly need a line-by-line explanation, my guess is you probably need to brush up on JavaScript first because the bulk of what that code is doing is setting variables. The 'tricky' part is where redirects the browser to a base64 encoded version of the XML and thinks that will make the browser believe it is opening an Excel file. That's the part that won't be cross browser in my opinion.

Javascript code explanation - export multiple html tables to excel

1 Answers1