使用Bootstrap data-export将多表格导出到单个Excel工作表的问题

问题原因 #

你当前使用的导出插件会逐一遍历所有带table-export类的表格元素，每遍历到一个就将之前已导出的内容和当前表格内容合并后追加到文件中，才会出现表1重复三次、表2重复两次的问题。

解决方法 #

这里提供两种改造成本极低的方案： #

方案1：修改导出JS逻辑（无需调整HTML）

调整导出按钮的点击事件，先把所有待导出表格按顺序拼接后再一次性导出，避免循环追加，参考代码如下：

$('[data-export="excel"]').click(function(e) {
  e.preventDefault();
  // 按顺序拼接所有表格HTML
  let exportContent = '';
  $('.table-export').each(function() {
    exportContent += this.outerHTML + '<p>&nbsp;</p>';
  });
  // 调用导出方法处理拼接后的整体内容
  $(exportContent).tableExport({
    type: $(this).data('export-type'),
    filename: $(this).data('export-name')
  });
});

方案2：调整HTML结构（无需修改JS逻辑）

如果不想动导出的JS代码，只需要调整表格的类挂载位置即可：

• 新增一个外层div包裹所有需要导出的表格，给这个div加table-export类
• 三个<table>标签自身移除table-export类
• 可以在表格之间加<br>标签实现导出后的空行分隔
  修改后的结构示例：

<!-- 外层容器加导出类 -->
<div class="table-export">
  <table class="table table-bordered table-condensed">表1内容</table>
  <br>
  <table class="table table-bordered table-condensed">表2内容</table>
  <br>
  <table class="table table-bordered table-condensed">表3内容</table>
</div>

<!-- 导出按钮代码不用改动 -->
<a href="#" class="btn btn-default btn-login hide-print" data-export="excel"  data-export-name="Exprt" data-export-type="xls">
  <i class="fa fa-download fa-fw"></i> 
  <span class="hidden-xs">Export</span>
</a>

两种方案都可以实现你要的导出效果：三个表格按顺序排列在同一张Excel工作表内，无重复内容。

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