jQuery wordExport实现网页导出word

        最近项目上有个需求，需要把网页的内容导出word中（页面中包含echarts图和表格），通过后台实现需要重新写代码，修改起来太麻烦，于是找到了jquery的wordExport插件。

下载地址：https://github.com/Jasmine1227/jquery.wordexport.js

 下载地址：https://github.com/eligrey/FileSaver.js/

 

使用方法：

第一步：引入相应js文件

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="./FileSaver.js"></script>

（注：一定先引入以上两文件之后再引入jquery.wordexport.js）

<script src="./jquery.wordexport.js"></script>

 

第二步：将需要导出的内容放到一个区域中

<section class="content">

......

</section>

 

第三步：实现导出点击事件

$("#report .content").wordExport("一键报告")

 

遇到的困难：

wordExport对页面中表格和图片的导出支持的很好，但是echarts是在canvas上渲染出来的，需要先取得其base64的编码（mychart.getDataURL("png")），然后写到网页中的img标签中（<img src="" id="IMG_YJBG"></img>）,最后在调用wordExport方法就能导出到word中啦，需要说明的是，在url中写base64编码可能需要一些时间，所以建议增加setTimeout方法延时0.5秒左右再导出就没有问题了。

$("#IMG_YJBG").attr("src", mychart.getDataURL("png"));

setTimeout('$("#report .content").wordExport("一键报告")',1000);