利用js工具wordexport将页面导出为Word文档
最近工作方面接到新需求,要将页面中的person信息导出为Word。
网上查了查,部分都是从JS入手。
亲自试用了一些JS工具,发现稂莠不齐。
不过最终还是找到了一个中意的"flower"-->wordexport.js。
导出效果还是不错的,详情见下方。
目的:
一方面向大家推荐,另一方面希望大家可以不吝赐教,推荐一些更为好用的工具。
案例:
测试案例的结构,比较简单。
![f4db59b7a1bc919fde5a93beeed69a0b.png](https://img-blog.csdnimg.cn/img_convert/f4db59b7a1bc919fde5a93beeed69a0b.png)
(1) 下载必须的js文件
下面给出GitHub的下载地址
https://github.com/eligrey/FileSaver.js/
![612b13205dba5b21f8541e84e358612a.png](https://img-blog.csdnimg.cn/img_convert/612b13205dba5b21f8541e84e358612a.png)
https://github.com/markswindoll/jQuery-Word-Export
![76b410484f3f2d5b273b75ba92bb32f2.png](https://img-blog.csdnimg.cn/img_convert/76b410484f3f2d5b273b75ba92bb32f2.png)
(2) 导入js文件
一共需要导入3个js文件
后者依赖于jQuery的jquery.min.js
![69830673e8d5cd860757ecdb41e222b6.png](https://img-blog.csdnimg.cn/img_convert/69830673e8d5cd860757ecdb41e222b6.png)
(3) 把需要导出的person信息放到div中
.......
![d4ecc2ab0cc2281171d734c92ecce042.png](https://img-blog.csdnimg.cn/img_convert/d4ecc2ab0cc2281171d734c92ecce042.png)
(4) 创建一个导出的按钮
导出Word
![1eea41e902e636badca46980ede99f23.png](https://img-blog.csdnimg.cn/img_convert/1eea41e902e636badca46980ede99f23.png)
(5) 导出Word事件
![9f0e23b712a6f6095926e48d7887151c.png](https://img-blog.csdnimg.cn/img_convert/9f0e23b712a6f6095926e48d7887151c.png)
补充:
$("#printTab").wordExport("odysee");
这里的odysee为导出的Word的名字。
如果不传入默认为jQuery-Word-Export
其实可以打开源码开一下。
如下图:
![8df502d14f15b78728953bc71e7e7340.png](https://img-blog.csdnimg.cn/img_convert/8df502d14f15b78728953bc71e7e7340.png)
(6) 测试
![82036121818215dbfd195c4ce34c33a3.png](https://img-blog.csdnimg.cn/img_convert/82036121818215dbfd195c4ce34c33a3.png)
点击导出Word按钮
![140b520fc84d12c2a9adbfddc79ff457.png](https://img-blog.csdnimg.cn/img_convert/140b520fc84d12c2a9adbfddc79ff457.png)
打开odysee文档
效果还是可以接受的
![04a81c83a021ee835d338c3dc1968dbc.png](https://img-blog.csdnimg.cn/img_convert/04a81c83a021ee835d338c3dc1968dbc.png)
总结:
从网上找了几个js工具,发现还是这个比较好用些。
同时希望大家可以不吝赐教,多多推荐一些更为好用的工具。
下面贴出word.html源码(如果大家想要原文件请留言或私信)
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
人员信息导出Word
odysee
姓 名 | odysee | 性 别 | ♂ | 出生年月 | 2019-6-13 |
民 族 | Linux | 籍 贯 | home/odysee/ | 出生地 | Centos7 |
入 学 时 间 | 2017 | 参加工 作时间 | 2018 | 健康状况 | 开机中... |
电 话 | call me odysee | 邮 箱 | I am in toutiao |