强推，利用js工具wordexport将页面导出为Word文档

双主双机热备 09-04 796

前言：

而今看官们对“html导出word方案”都比较注意，姐妹们都需要了解一些“html导出word方案”的相关内容。那么小编也在网络上汇集了一些关于“html导出word方案””的相关资讯，希望大家能喜欢，大家快快来了解一下吧！

利用js工具wordexport将页面导出为Word文档

最近工作方面接到新需求，要将页面中的person信息导出为Word。

网上查了查，部分都是从JS入手。

亲自试用了一些JS工具，发现稂莠不齐。

不过最终还是找到了一个中意的"flower"-->wordexport.js。

导出效果还是不错的，详情见下方。

目的：

一方面向大家推荐，另一方面希望大家可以不吝赐教，推荐一些更为好用的工具。

案例：

测试案例的结构，比较简单。

(1) 下载必须的js文件

下面给出GitHub的下载地址

(2) 导入js文件

一共需要导入3个js文件

后者依赖于jQuery的jquery.min.js

(3) 把需要导出的person信息放到div中

</div>

(4) 创建一个导出的按钮

导出Word

</button>

(5) 导出Word事件

function exportWord(){

$("#printTab").wordExport("odysee");

}

</script>

补充：

$("#printTab").wordExport("odysee");

这里的odysee为导出的Word的名字。

如果不传入默认为jQuery-Word-Export

其实可以打开源码开一下。

如下图：

(6) 测试

点击导出Word按钮

打开odysee文档

效果还是可以接受的

总结：

从网上找了几个js工具，发现还是这个比较好用些。

同时希望大家可以不吝赐教，多多推荐一些更为好用的工具。

下面贴出word.html源码(如果大家想要原文件请留言或私信)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<html>

<head>

function exportWord(){

$("#printTab").wordExport("odysee");

}

</script>

</head>

<body>

导出Word

</button>

</div>

<label><font >odysee</font></label>

</div>

<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;width:90px; border:black 0.5pt solid;overflow:hidden;'>odysee</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;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;'>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;'>Centos7</td>

</tr>

<tr>

</tr>

<tr>

<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>

</tr>

</table>

</div>

</body>

</html>

本文地址：http://www.longkongtuishu.com/ca8abAmsCA1cOCFc.html

标签： #html导出word方案