使用table2excel导出DataTable至Excel时表头重复的原因

问题 #

用table2excel插件导出DataTable到Excel时，表头重复出现了，这是什么原因？相关代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Scripts/assets/dist/css/bootstrap.min.css" rel="stylesheet" />
    <link href="Scripts/DataTables/DataTables-1.13.3/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
    <script src="Scripts/assets/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="gridview">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>State</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>First Name of Person 1</td>
                        <td>Last Name of Person 1</td>
                        <td>State 1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>First Name of Person 2</td>
                        <td>Last Name of Person 2</td>
                        <td>State 2</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>First Name of Person 3</td>
                        <td>Last Name of Person 3</td>
                        <td>State 3</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>First Name of Person 4</td>
                        <td>Last Name of Person 4</td>
                        <td>State 4</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>First Name of Person 5</td>
                        <td>Last Name of Person 5</td>
                        <td>State 5</td>
                    </tr>
                </tbody>
            </table>
            <button id="btnExport" class="btn btn-success btn-sm float-end"><i class="fa fa-file-excel-o"></i>&nbsp;Export</button>
        </div>

        <script src="Scripts/multiselect/jquery-3.6.0.min.js"></script>
        <link href="Scripts/datepicker/jquery-ui.css" rel="stylesheet" />
        <script src="Scripts/datepicker/jquery-ui.js"></script>
        <script src="Scripts/regex.js"></script>
        
        <%--<script>
                $.noConflict();
            </script>--%>
        <%--<script src="Scripts/DataTables/jquery-3.5.1.js"></script>--%>
        <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
        <script src="Scripts/DataTables/DataTables-1.13.3/js/dataTables.bootstrap5.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js"></script>
        <script>
            $(document).ready(function () {
                var $j = jQuery.noConflict();
                if ($j('#gridview').find("table").length > 0) {
                    $j('#gridview').find("table").DataTable({
                        scrollY: "400px",
                        scrollX: true,
                        scrollCollapse: true,
                        paging: true,
                        fixedColumns: {
                            left: 1
                        },
                        "columnDefs": [{
                            "targets": 'no-sort',
                            "orderable": false,
                        }]
                    });
                }
                $j('#btnExport').click(function (e) {
                    e.preventDefault();
                    $j('#gridview').table2excel({
                        filename: "ExportSummary_" + (new Date).toLocaleTimeString().toString() + ".xls"
                    });
                });
            });
        </script>
        
    </form>
</body>
</html>

原因分析 #

核心问题出在两点：

• 你启用了DataTables的fixedColumns特性，这个功能会在页面里额外生成一个<thead>结构用来固定左侧列，加上你原本写的原生表头，页面里现在有两个表头。
• 你的导出代码是对整个#gridview容器执行的，table2excel插件会遍历容器内所有表格相关元素，把这两个表头都抓进去了，自然导出后就重复了。

解决方法 #

方法1：直接导出目标表格（最简单） #

把导出的选择器从#gridview改成表格本身，这样插件只会抓取目标表格的内容，不会包含额外生成的表头：

$j('#btnExport').click(function (e) {
    e.preventDefault();
    $j('#gridview table').table2excel({
        filename: "ExportSummary_" + (new Date).toLocaleTimeString().toString() + ".xls"
    });
});

方法2：排除冗余表头 #

如果一定要导出整个容器，可以用table2excel的exclude配置，把DataTables生成的额外表头排除掉（这类表头通常带有dt-column-left或dt-fixed-columns类名）：

$j('#btnExport').click(function (e) {
    e.preventDefault();
    $j('#gridview').table2excel({
        filename: "ExportSummary_" + (new Date).toLocaleTimeString().toString() + ".xls",
        exclude: ".dt-column-left, .dt-fixed-columns"
    });
});

方法3：改用DataTables官方导出插件（最稳定） #

table2excel是第三方插件，和DataTables的兼容性不如官方的Buttons插件。换成官方插件能彻底避免这类问题，步骤如下：

1. 引入Buttons插件的相关脚本和样式（按需引入）
2. 修改DataTables初始化代码，添加导出按钮：

$j('#gridview').find("table").DataTable({
    scrollY: "400px",
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    fixedColumns: {
        left: 1
    },
    columnDefs: [{
        targets: 'no-sort',
        orderable: false,
    }],
    dom: 'Bfrtip', // 配置显示按钮的位置
    buttons: [
        'excel' // 添加Excel导出按钮
    ]
});

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