HTML代码转word!亲测!可用!!!

mac2024-04-23  61

现在项目中遇到一个需求,就是一个富文本编辑区中,有echars表格。用户点击保存按钮,需要导出为word文档。

 

因为现在接手的项目,是基于上一个项目的框架。两个项目功能点差不多。但是在导出word这块,是后台java做的。也就是用的POI。前端传递参数至后台,后台将word模板中的${XXX}给替换掉。

但是这有一个问题,就是新项目中,word排版改了,跟之前的不一样。你以为改改word模板的${xxx}的不就行了?可惜,后台java还牵扯到java在解析时的一些代码,总之一句话,改动成本很高!

怎么办!怎么办!怎么办!

由于本人java和WEB都会写。本能的想到html转word。这多简单,html啥样,转成word不就好了?

说干就干!

于是用了N多方法,看了网上的一些误导别人的帖子,用什么FileSaver.js和jquery.wordexport.js!

我相信当有人看到我这篇帖子的时候,对上面这两个JS肯定有所了解了。

但是!!!导出word,如果HTML中是纯文字还行,一旦牵扯到图片,甭管你怎么转,如果只用上面两个JS ,你指定弄不出来,即便弄出来了,图片也是个路径,把word文件发送给另一台电脑上,根本显示不出图片!!

怎么办!!!!

花费了差不多3天吧,终于解决了

需要引入4个文件

1.jquery.js 2.fs.js 3.jw.js 4.hd.js

这4个文件必须引入,而且顺序不能错!!!

下面是代码

<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--引入jq--> <script src="common/jquery-1.7.2.js"></script> <!--引入echarts--> <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script> <script src="common/fs.js"></script> <script src="common/jw.js"></script> <script src="common/hd.js"></script> </head> <body id="count"> <p>word测试</p> <!--<div style="width: 500px;height: 500px;display: none" id="demo">--> <!--</div>--> <table border="1"><tr><th>Month</th><th>Savings</th></tr><tr><td>January</td><td>$100</td></tr></table> <img src="base64code" id="myimg" alt="" style="width:200px;height:200px;display: block"> <button id="btn">click</button> <script type="text/javascript"> $("#btn").click(function () { //获取要下载成word的代码块中的html代码 var content=$("body").html(); //调用以下函数即可,{orientation:'landscape'}是声明下载出来的word排版为横版, var converted = htmlDocx.asBlob(content,{orientation:'landscape'}); //下载成word》 saveAs(converted, 'test.docx'); }); </script> </body> </html>

傻瓜式代码,自己把base64code替换成有效地base64代码即可。太长了就不输入了

亲测可用!兼容性还不错,IE9以上至少没问题

疲惫啊!!下面提供上面三个JS的下载地址。莫要当伸手党。小小的支援下,感激不尽。

https://download.csdn.net/download/qq_34113541/11945949

前人种树后人乘凉

最新回复(0)