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

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

老项目是 jsp 架构的，外加这个是 arcgis 查询结果导出成 excel 不是后端返回的，之前 vue 的那个框架用不了，只能另寻他法了…

• 感谢开源项目：tableExport.jquery.pluginjQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF

1.在项目中加入

tableExport.jquery.plugin-1.10.22

相关的文件

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

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

cd tableExporttree /f│  tableExport.min.js│└─libs├─FileSaver│      FileSaver.min.js│└─js-xlsxxlsx.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\').tableExport56c({

  换成

  $(\'#showTableId\').tableExport({

  即可

关于隐藏 table，还有点小坑

• display: none;

  取不到数据

• width: 0; height: 0;

  也取不到数据

• 最后有数据的方式是：

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

第二天补充：又看了下文档（github Readme.md），发现这样写就可以导出隐藏表格了 =>

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

，所以还是多看看看文档，自己摸索出来了还好，没摸索出来…

经测试，导出1000条数据就很卡了…浏览器直接卡到无响应

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