使用JS/JQuery从DataTable导出Excel：表头与重复数据问题求助

我来帮你搞定这个导出问题，你遇到的两种情况其实都是因为没正确处理DataTable的DOM结构和克隆逻辑：

问题原因分析 #

• 第一种代码（表头缺失）：otable.$('tr')只获取了DataTable里<tbody>中的数据行，而表头在<thead>里，新建的空表自然没有表头。
• 第二种代码（数据重复）：你把克隆的所有行追加到原表#plExcelReport里，原表本身已经渲染了第一页的数据，克隆的是DataTable所有分页的完整数据，所以第一页数据就重复了。

正确解决方案 #

我们需要单独提取表头和所有数据行，构建一个临时的独立表格来导出，这样既不会影响原表，又能包含完整的表头和无重复的数据。具体代码如下：

var otable = $('#plExcelReport').DataTable();

// 1. 创建临时隐藏表格
var $tempTable = $('<table style="display:none;"></table>').appendTo('body');

// 2. 复制原表的表头（thead）到临时表
$tempTable.append(otable.table().header().cloneNode(true));

// 3. 复制所有数据行到临时表（包括所有分页的数据）
$tempTable.append(otable.$('tr').clone());

// 4. 使用table2excel导出临时表
$tempTable.table2excel({
    exclude: ".noExl",
    name: "Worksheet Name",
    filename: xcelFileName
});

// 5. 导出完成后移除临时表，避免页面残留
setTimeout(function() {
    $tempTable.remove();
}, 100);

代码说明 #

• otable.table().header()：专门获取DataTable的表头部分（<thead>），确保我们能拿到完整的表头结构。
• 临时表设置display:none：避免在页面上显示这个临时创建的表格，不影响用户体验。
• 最后移除临时表：防止页面DOM中残留无用元素，保持页面整洁。

这样导出的Excel就会同时包含正确的表头和所有无重复的数据了，你可以直接测试这段代码~

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