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

最新推荐文章于 2025-03-19 17:34:42 发布

置顶 qq_34113541

最新推荐文章于 2025-03-19 17:34:42 发布

阅读量6.1k

点赞数 4

分类专栏： java web 文章标签： html java html转word web 前端

本文链接：https://blog.csdn.net/qq_34113541/article/details/102837764

版权

java 同时被 2 个专栏收录

2 篇文章

订阅专栏

web

1 篇文章

订阅专栏

本文介绍了一种将前端HTML内容，包括echarts图表和图片，转换为Word文档的方法。通过使用特定的JavaScript库，如fs.js、jw.js和hd.js，解决了图片路径和排版问题，实现了HTML至Word的高效转换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在项目中遇到一个需求，就是一个富文本编辑区中，有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

前人种树后人乘凉