Javascript代码解释-导出多个html表格到excel答案

【问题标题】：Javascript code explanation - export multiple html tables to excelJavascript代码解释-导出多个html表格到excel
【发布时间】：2015-06-23 09:07:06
【问题描述】：

有人可以逐行向我解释（或参考链接）以帮助我了解如何将多个 html 表格导出到 excel 中吗？

我最初的问题是：如何将多个表格导出到单独的工作表中（但有些组合在一起）？前任。表 A、B、C、D。我想将 A 和 B 放在 1 个工作表中，将 C 和 D 放在另一个工作表中，并将所有工作表打包在 1 个 excel 文件中。

我正在查看 Stack Overflow 上的其他问题，发现这个问题类似于我的问题（“如何将多个 html 表导出到 excel？”由 dotnetN00b 提出）该问题的最佳答案写了这个和HTML 代码。我在理解每条线在做什么时遇到了一些麻烦。

如果有人可以向我解释或将我重定向到一个站点以帮助我了解我需要了解它，将不胜感激！

Javascript和HTML代码的来源：How do I export multiple html tables to excel?

Javscript 代码：

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

    }
})();

HTML 代码：

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

【问题讨论】：

要通过解释分解这一点，您需要了解JavaScript。我已将您的代码添加到 JsFiddle 这应该会有所帮助。

标签： javascript html excel html-table export-to-excel

【解决方案1】：

本质上，它循环遍历您的 HTML 表格并构建与 Excel 兼容的 XML，以 Excel 可以支持的格式表示表格。我查看了原始问题，也只是查看了代码，这不可能是跨浏览器兼容的。如果幸运的话，它可以在 FireFox 和 Chrome 中运行，但绝对不能在 IE 中运行。

这很好地解释了它在做什么，如果你真的需要逐行解释，我猜你可能需要先复习一下 JavaScript，因为该代码所做的大部分工作都是设置变量。 “棘手”部分是将浏览器重定向到 XML 的 base64 编码版本，并认为这将使浏览器相信它正在打开一个 Excel 文件。这是我认为不会跨浏览器的部分。

【讨论】：