jquery插件导出word：jquery.wordexport.js

前言

　　今天项目中遇到一个需求把我们系统中的统计数据导出来（主要是表格）。其实实现的的方法有很多，而此次针对我的系统第一获取数据有点慢，加上前不久写了一个在线阅读pdf，故此这次也想用前端的方式来导出。其实网上大致是两种一种是微软那种直接排除了，选择了运用第三方插件的方式。我用的jquery.wordexport.js导出的word，顺便尝试了一下jquery.table2excel.js导出Excel。顺便我的统计中也H5图表用的是echart。

导出word（jquery.wordexport.js）

此插件运用其实很简单，在这个过程当中主要遇到的就是系统中的样式没办法运用外联的方式。合并单元格rowspan我们系统中是用的display我需要把它移除。下面说过程。

1.js引用与实现

1.1.请按下方顺序引用不然是不能正常执行的依赖。

<script src="jqwordexport/jquery-1.11.1.js"></script>
<script src="jqwordexport/FileSaver.js"></script>
<script src="jqwordexport/jquery.wordexport.js"></script>

1.2.实现代码就更简单了。

 $("#showDIV").wordExport(FineName)

 一行代码就行FineName为文件名。

2.问题的解决

首先这是我页面上的内容，我需要把这个table放到showDIV中的一个div中;还要同时把这个table所在的div中不需要的删除。如下

 var htmlstr = $("#HiddenDanger").html();//table所在div
 $('#printWord').html(htmlstr);
 $('#printWord div[data-role=pager]').remove();//把分页div删除
 $('#showDIV script').remove();//div引用的js代码删除

 

 然后导出，这样你会发现只有这个table，并且table为虚线，是不是也要把查询条件，导出内容加上去。

我把这些内容也同时加到了showDIV 中。如下

<div id="showDIV" >
    <style>
        #printWord table {
    
    
            border: 1px solid #ddd