返回目录：word文档
利用js工具wordexport将页面导出为Word文档
最近工作方面接到新需求，要将页面中的person信息导出为Word。
网上查了查，部分都是从JS入手。
亲自试用了一些JS工具，发现稂莠不齐。
不过最终还是找到了一个中意的"flower"-->wordexport.js。
导出效果还是不错的，详情见下方。
目的：
一方面向大家推荐，另一方面希望大家可以不吝赐教，推荐一些更为好用的工具。
案例：
测试案例的结构，比较简单。
(1) 下载必须的js文件
下面给出GitHub的下载地址
https://github.com/eligrey/FileSaver.js/
https://github.com/markswindoll/jQuery-Word-Export
(2) 导入js文件
一共需要导入3个js文件
后者依赖于jQuery的jquery.min.js
(3) 把需要导出的person信息放到div中
<div id="printTab">
<table>.......</table>
</div>
(4) 创建一个导出的按钮
<button type="button" onClick="exportWord()">
</button>
(5) 导出Word事件
<script type="text/javascript">
function exportWord(){
$("#printTab").wordExport("odysee");
}
</script>
补充：
$("#printTab").wordExport("odysee");
这里的odysee为导出的Word的名字。
如果不传入默认为jQuery-Word-Export
其实可以打开源码开一下。
如下图：
(6) 测试
点击导出Word按钮
打开odysee文档
效果还是可以接受的
总结：
从网上找了几个js工具，发现还是这个比较好用些。
同时希望大家可以不吝赐教，多多推荐一些更为好用的工具。
下面贴出word.html源码(如果大家想要原文件请留言或私信)
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<html>
<head>
<title>人员信息</title>
<script type="text/javascript" src="https://www.qiaoshan022.cn./jquery.min.js"></script>
<script type="text/javascript" src="https://www.qiaoshan022.cn./FileSaver.js"></script>
<script type="text/javascript" src="https://www.qiaoshan022.cn./jquery.wordexport.js"></script>
<script type="text/javascript">
function exportWord(){
$("#printTab").wordExport("odysee");
}
</script>
</head>
<body>
<div>
<button type="button" onClick="exportWord()">
导出Word
</button>
</div>
<!-- 打印表 -->
<div id="printTab">
<div align="center">
<div>
<label><font >odysee</font></label>
</div>
<table cellspacing=0 cellpadding=0 style='border-color:black; border-style:solid; BORDER-COLLAPSE:collapse;border:none;table-layout:fixed;word-break:break-all;'>
<tr>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;width:60px; border:black 0.5pt solid;overflow:hidden;'>姓 名</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:90px; border:black 0.5pt solid;overflow:hidden;'>odysee</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:60px; border:black 0.5pt solid;overflow:hidden;'>性 别</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:110px; border:black 0.5pt solid;overflow:hidden;'>♂</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:75px; border:black 0.5pt solid;overflow:hidden;'>出生年月</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;width:110px; border:black 0.5pt solid;overflow:hidden;'>2019-6-13</td>
</tr>
<tr>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;border:black 0.5pt solid;overflow:hidden;'>民 族</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>Linux</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>籍 贯</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>home/odysee/</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>出生地</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>Centos7</td>
</tr>
<tr>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;border:black 0.5pt solid;overflow:hidden;'>入 学<br/>时 间</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>2017</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>参加工<br/>作时间</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>2018</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>健康状况</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>开机中...</td>
</tr>
<tr>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;height:50px;border:black 0.5pt solid;overflow:hidden;'>电 话</td>
<td style='font-family: "Simsun";font-size: 13pt;text-align: center;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;border:black 0.5pt solid;overflow:hidden;' colspan="2" >call me odysee</td>
<td style='font-size:13pt;font-family:Simsun;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;vertical-align:middle;text-align:center;border:black 0.5pt solid;overflow:hidden;'>邮 箱</td>
<td style='font-family: "Simsun";font-size: 13pt;text-align: center;border-top:0.5pt solid;border-right:0.5pt solid;border-bottom:0.5pt solid;border-left:0.5pt solid;border:black 0.5pt solid;overflow:hidden;' colspan="2" >I am in toutiao</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>