如何实现导出Excel时移除表格操作按钮且保留页面显示

问题背景 #

在Laravel工资结算模块中，通过循环渲染生成多份工资结算表格，表格内包含展开员工列表的“=”按钮和Export导出按钮。使用table-to-excel工具导出Excel时，这些操作按钮会被带入导出文件，需要实现页面正常显示按钮，但导出时自动剔除。

可行解决方案 #

方案一：克隆表格并移除按钮后导出 #

通过克隆目标表格，在克隆副本中移除操作按钮，再对副本执行导出，不影响原页面的DOM结构。

修改后的导出JS代码：

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<script>
function exportReportToExcel(key) {
    // 获取目标表格
    const originalTable = document.getElementsByTagName("table")[key];
    // 深克隆表格
    const clonedTable = originalTable.cloneNode(true);
    
    // 移除克隆表格内的所有操作按钮
    clonedTable.querySelectorAll('.show-emp, .export').forEach(button => button.remove());
    
    // 导出克隆后的表格
    TableToExcel.convert(clonedTable, {
        name: `Payroll_Period_${key+1}.xlsx`,
        sheet: {
            name: 'Payroll_Details'
        }
    });
}
</script>

方案二：利用table-to-excel的排除规则 #

给操作按钮添加专属类，通过table-to-excel的配置排除带有该类的元素。

1. 修改视图中的按钮代码，添加export-exclude类：

<a href="javascript:void(0)" class="btn btn-sm mb-2 checkall me-5 show-emp ms-6 export-exclude" style="background-color: #edf2f9; border-radius: 0%; border: 1px solid #dfe1e4;"><i class="export">=</i></a>                                                     
<a href="javascript:void(0)" class="btn btn btn-success mr-1 float-end export export-exclude" data-num="{{$key}}" onclick="exportReportToExcel({{$key}})">Export</a>

2. 修改导出JS函数，添加排除配置：

<script src="https://cdn.jsdelivr.net/gh/linways/table-to-excel@v1.0.4/dist/tableToExcel.js"></script>
<script>
function exportReportToExcel(key) {
    const table = document.getElementsByTagName("table");
    TableToExcel.convert(table[key], {
        name: `Payroll_Period_${key+1}.xlsx`,
        sheet: {
            name: 'Payroll_Details'
        },
        excludeCSS: '.export-exclude' // 排除带有该类的元素
    });
}
</script>

额外优化 #

• 导出文件名可以结合工资周期命名，避免重复覆盖
• 如果需要导出员工明细，可在导出前自动展开员工列表：

// 导出前触发展开按钮
originalTable.querySelector('.show-emp').click();
// 等待DOM渲染完成后执行导出（根据实际情况调整延迟时间）
setTimeout(() => {
    // 克隆/导出逻辑
}, 300);

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