前端导出 table 成 excel（jquery 方向）

前端导出 table 成 excel（jquery 方向）

1.在项目中加入

tableExport.jquery.plugin-1.10.22

• github 文件下载慢可以通过这个链接下载：tableExport.jquery.plugin-1.10.22.zip（2021.3.29 从 github 下载）

由于我的项目只需要导出 excel，故 pdf 无关文件没有导入

cd tableExport
tree /f

│  tableExport.min.js
│
└─libs
├─FileSaver
│      FileSaver.min.js
│
└─js-xlsx
xlsx.core.min.js

2.jsp 页面引入文件

<!-- table 导出  excel 插件 -->
<script type="text/javascript" src="<%=ctx %>/tableExport/libs/FileSaver/FileSaver.min.js"></script>
<script type="text/javascript" src="<%=ctx %>/tableExport/libs/js-xlsx/xlsx.core.min.js"></script>
<!-- 这个不要忘了导入，很关键 -->
<script type="text/javascript" src="<%=ctx %>/tableExport/tableExport.min.js"></script>

3.事件触发导出方法

// 导出表格内容
function exportData()
{
/* 导出表格内容 */
$('#exportTableId').tableExport({
type:'excel',
fileName: '条件查询结果-' + new Date().format("yyyyMMdd-hhmmss")
});
}

4.补充

由于页面上的 table 表格做了分页处理，然后这个导出方式又依赖于 table 的 dom 元素，故我采用的是导出隐藏 table 的方式（老项目太磨人了，优先实现功能暂且不管性能吧... 毕竟数据也不会很多）

• 即页面上其实是有两个 table，一个用于分页展示，另一个用于导出 excel 方法取到全部数据（当然用户是看不到这个 table 的）
• 所以要导出分页的数据，只需要把

  $('#exportTableId').tableExport
  56c
  ({

  换成

  $('#showTableId').tableExport({

  即可

关于隐藏 table，还有点小坑

• display: none;

  取不到数据

• width: 0; height: 0;

  也取不到数据
• 最后有数据的方式是：

  <table style="height: 0; display: inline-block; overflow: hidden; position: fixed; top: 0;">....</table>

<table id="conditionQueryWholeTable" style="display:none;" data-tableexport-display="always">...</table>

5.更多操作自己探索，我的需求到这里已经结束了...