如何将多个HTML表格导出到单个Excel工作簿的不同工作表中？

没问题，我帮你修改了代码，现在可以传入多个表格ID，把每个表格的数据放到同一Excel的不同工作表里，同时保留了你原来的格式设置和文件名规则。

修改思路 #

• 把函数改成接收表格ID数组作为参数，比如fnExcelReport(['table1', 'table2'])
• 利用Excel支持的MSO XML语法，在导出的HTML里定义多个工作表
• 保留原有的表头背景色、文件名生成逻辑，同时兼容IE和其他现代浏览器

修改后的完整代码 #

function fnExcelReport(tableIds) {
    // 生成Excel工作簿的基础XML结构（用于定义多工作表）
    var excelXmlHeader = `<!--[if gte mso 9]>
    <xml>
        <x:ExcelWorkbook>
            <x:ExcelWorksheets>`;
    var excelXmlFooter = `            </x:ExcelWorksheets>
        </x:ExcelWorkbook>
    </xml>
    <![endif]-->`;

    var worksheets = '';

    // 循环处理每个表格，生成对应的工作表
    tableIds.forEach(function(tableId, index) {
        var tab = document.getElementById(tableId);
        if (!tab) return; // 如果找不到表格，跳过

        // 生成单个工作表的内容，保留原有的表头背景色
        var tabText = `<table border='2px'><tr bgcolor='#87AFC6'>`;
        for (var j = 0; j < tab.rows.length; j++) {
            tabText += tab.rows[j].innerHTML + `</tr>`;
        }
        tabText += `</table>`;

        // 给每个工作表命名，默认用"Sheet1"、"Sheet2"，也可以改成自定义名称
        var sheetName = `Sheet${index + 1}`;
        worksheets += `<x:ExcelWorksheet>
            <x:Name>${sheetName}</x:Name>
            <x:WorksheetOptions>
                <x:DisplayGridlines/>
            </x:WorksheetOptions>
            <table>${tabText}</table>
        </x:ExcelWorksheet>`;
    });

    // 组合完整的导出内容
    var exportContent = excelXmlHeader + worksheets + excelXmlFooter;

    // 生成文件名，保留你原来的规则
    var e = document.getElementById("configselect");
    var strUser = e.options[e.selectedIndex].text;
    var f = document.getElementById("configmonth");
    var strUser1 = f.options[f.selectedIndex].text; // 修正原代码的索引错误
    var filename = `${strUser}_${strUser1}_${document.getElementById('configkpi').value}_${document.getElementById('configyear').value}.xls`;

    // 浏览器兼容处理
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        // IE浏览器处理
        var txtArea1 = document.createElement('textarea');
        document.body.appendChild(txtArea1);
        txtArea1.style.display = 'none';
        txtArea1.document.open("txt/html", "replace");
        txtArea1.document.write(exportContent);
        txtArea1.document.close();
        txtArea1.focus();
        var sa = txtArea1.document.execCommand("SaveAs", true, filename);
        document.body.removeChild(txtArea1);
        return sa;
    } else {
        // 现代浏览器处理
        var a = document.createElement('a');
        var data_type = 'data:application/vnd.ms-excel';
        var encodedContent = encodeURIComponent(exportContent);
        a.href = `${data_type}, ${encodedContent}`;
        a.download = filename;
        a.click();
        return true;
    }
}

关键说明 #

1. 多工作表实现：通过MSO的XML语法定义<x:ExcelWorkbook>和<x:ExcelWorksheet>，每个表格对应一个<x:ExcelWorksheet>节点，Excel打开时会自动识别为独立工作表
2. 文件名修复：原代码里获取月份选项时误用了下拉框的索引，我已经修正为正确的f.selectedIndex
3. 调用方式：现在你需要传入表格ID数组，比如点击按钮时调用：

   // 示例：导出ID为table1、table2、table3的三个表格
   document.getElementById('exportBtn').addEventListener('click', function() {
       fnExcelReport(['table1', 'table2', 'table3']);
   });
   

4. 自定义工作表名称：如果想给工作表起自定义名称，把var sheetName = \Sheet${index + 1}``改成你需要的名称即可，比如用表格的标题或ID

内容的提问来源于stack exchange，提问作者Ashesh Das