使用TableExport.js实现Bootstrap HTML表格导出功能失效问题

我来帮你排查TableExport.js导出失效的问题，咱们从最容易踩的坑开始捋：

1. 先解决重复引入的冲突！ #

你现在同时导入了tableexport.js和tableexport.min.js——这绝对会出问题！同一个库的开发版和压缩版不能同时用，直接删掉其中一个就行，推荐保留压缩版tableexport.min.js。

2. 确认jQuery加载顺序&路径正确 #

TableExport完全依赖jQuery，所以jQuery必须在TableExport之前加载（这点你已经做对了，但要再确认路径）：

• 打开浏览器控制台（按F12），切换到「网络」标签，刷新页面后看这几个JS文件的状态码：如果是404，说明你写的相对路径（比如../vendor/...）和实际文件位置不匹配，调整路径就行。
• 如果控制台提示$ is not defined，那就是jQuery没加载成功，重点检查路径或者是否在TableExport之后才加载了jQuery。

3. 别忘了初始化插件！ #

光引入文件没用，必须给目标表格写初始化代码，插件才会生成导出按钮并生效。比如你的表格id是exportTable，要在页面加载完成后执行这段代码：

$(document).ready(function() {
  $('#exportTable').tableExport({
    // 可选配置：指定要支持的导出格式
    formats: ['xlsx', 'csv', 'pdf'],
    // 自定义导出文件的前缀名
    filename: '我的表格数据',
    // 如果想用Bootstrap样式的按钮，加上这个配置
    bootstrap: true
  });
});

要是没加这段初始化，插件根本不会工作哦。

4. 检查Bootstrap依赖（如果用Bootstrap样式按钮） #

如果你想让导出按钮用Bootstrap的样式，得确保已经引入了Bootstrap的CSS（必要）和JS（如果需要按钮交互效果的话）。TableExport的Bootstrap主题依赖Bootstrap，没引入的话不仅样式会乱，甚至可能影响功能。

5. 用控制台抓报错信息 #

打开浏览器「控制台」标签，看看有没有红色报错：

• 如果提示$(...).tableExport is not a function：说明TableExport没加载成功，要么是路径错了，要么是重复引入导致冲突（回到第一步解决）
• 其他报错：比如提示某个依赖缺失（比如FileSaver.js，部分TableExport版本需要单独引入），根据报错信息补全依赖就行。

6. 确认表格结构是标准格式 #

TableExport对表格结构有要求，得是标准的HTML表格：要有<thead>（表头）和<tbody>（表体），尽量不要在表格里嵌套其他复杂元素（比如另一个表格），不然可能导致导出异常。

给你个完整的可参考示例代码：

<!-- 先引入jQuery压缩版 -->
<script src="../vendor/TableExport/js/jquery-3.3.1.min.js"></script>
<!-- 引入FileSaver（部分TableExport版本需要） -->
<script src="../vendor/TableExport/js/FileSaver.min.js"></script>
<!-- 引入TableExport压缩版 -->
<script src="../vendor/TableExport/js/tableexport.min.js"></script>
<!-- 引入TableExport的样式文件 -->
<link rel="stylesheet" href="../vendor/TableExport/css/tableexport.min.css">

<!-- 你的标准结构表格 -->
<table id="exportTable" class="table table-bordered">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

<!-- 初始化脚本 -->
<script>
$(document).ready(function() {
  $('#exportTable').tableExport({
    formats: ['xlsx', 'csv'],
    bootstrap: true,
    filename: '用户数据'
  });
});
</script>

按照上面的步骤逐一排查，应该能解决你的导出功能失效问题。

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