将HTML表导出为Excel保留格式

Question

我的网页上有多个表格，我想将表格导出到相同的Excel文件中，此刻我有一个代码（该代码来自此处的一篇文章），但问题是Excel文件是制作精美，但没有任何样式。例如：我有一个带有 td 标签和 colspan 5 的td，但这没有保存在我的xls文件中。我也有另一个代码，仅导出一个表，此代码以样式导出信息。如何导出具有样式的表？

这里是导出多个表（无样式）的代码

$(document).ready(function () {
 
});

var tablesToExcel = (function () {
            var uri = 'data:application/vnd.ms-excel;base64,'
                , tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'
                    + '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>'
                    + '<Styles>'
                    + '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>'
                    + '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>'
                    + '</Styles>'
                    + '{worksheets}</Workbook>'
                , tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>'
                , tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>'
                , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
                , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
            return function (tables, wsnames, wbname, appname) {
                var ctx = "";
                var workbookXML = "";
                var worksheetsXML = "";
                var rowsXML = "";

                for (var i = 0; i < tables.length; i++) {
                    if (!tables[i].nodeType) tables[i] = document.getElementById(tables[i]);
                    for (var j = 0; j < tables[i].rows.length; j++) {
                        rowsXML += '<Row>'
                        for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
                            var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                            var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                            var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
                            dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
                            var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
                            dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
                            ctx = {
                                attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : ''
                                , nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String'
                                , data: (dataFormula) ? '' : dataValue
                                , attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
                            };
                            rowsXML += format(tmplCellXML, ctx);
                        }
                        rowsXML += '</Row>'
                    }
                    ctx = { rows: rowsXML, nameWS: wsnames[i] || 'Sheet' + i };
                    worksheetsXML += format(tmplWorksheetXML, ctx);
                    rowsXML = "";
                }

                ctx = { created: (new Date()).getTime(), worksheets: worksheetsXML };
                workbookXML = format(tmplWorkbookXML, ctx);

                console.log(workbookXML);

                var link = document.createElement("A");
                link.href = uri + base64(workbookXML);
                link.download = wbname || 'Workbook.xls';
                link.target = '_blank';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        })();

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="col-xs-push-2 col-xs-10 col-md-push-8 col-md-2 form-group">
                        <label class="control-label" style="color:white;">a</label>
                        <button onclick="tablesToExcel(['T1','T2'], ['Table 1','Table 2'], 'TestBook.xls', 'Excel')">Export to Excel</button>
                    </div>

<div class="row">
                    <div class="col-md-4 form-group hidden">
                        <table class="table table-bordered table-striped" id="T1">
                            <thead>
                                <tr>
                                    <td colspan="4" class="text-center"><b>Table 1</b></td>
                                </tr>
                                <tr>
                                    <td class="text-center">Fecha</td>
                                    <td class="text-center">Anterior</td>
                                    <td class="text-center">Actual</td>
                                </tr>
                            </thead>
                            <tbody id="T1Body">
                              <tr>
                                <td>2018-09-30</td>
                                <td>2000.00</td>
                                <td>700.00</td>
                              </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="col-md-8 form-group hidden">
                        <table class="table table-bordered table-striped" id="T2">
                            <thead>
                                <tr>
                                    <td colspan="8" class="text-center"><b>Table 2</b></td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="text-center">Data 1</td>
                                    <td colspan="3" class="text-center">Data 2</td>
                                </tr>
                                <tr>
                                    <td colspan="1" style="border-top: none !important;" class="text-center">Date</td>
                                    <td colspan="1" class="text-center">Ini</td>
                                    <td colspan="1" class="text-center">End</td>
                                    <td colspan="1" class="text-center">Prod</td>
                                    <td colspan="1" class="text-center">Ini</td>
                                    <td colspan="1" class="text-center">End</td>
                                    <td colspan="1" class="text-center">Prod</td>
                                </tr>
                            </thead>
                            <tbody id="T2Body">
                              <tr>
                                <td>2018-09-30</td>
                                <td>200.00</td>
                                <td>300.00</td>
                                <td>100.00</td>
                                <td>500.00</td>
                                <td>650.00</td>
                                <td>150.00</td>
                              </tr>
                            </tbody>
                            <tfoot id="T2Foot">
                              <tr><td colspan="3" class="text-right"><b>Total 1:</b></td><td colspan="1"><b>100.00</b></td>
                            <td colspan="2" class="text-right"><b>Total 2:</b></td> <td colspan="1"><b>150.00</b></td></tr>
                            </tfoot>
                        </table>
                    </div>

</div>

这是仅导出一个表（保持样式）的代码

Codepen Code

更新

在寻找解决方案时，我发现问题是因为我使用的是 xml 而不是 html ，所以现在的问题是，如何使用上述方法代码？