前端将html转word

最新推荐文章于 2025-04-23 15:21:06 发布

更何况不过刚好

最新推荐文章于 2025-04-23 15:21:06 发布

阅读量647

点赞数

分类专栏： web前端文章标签：前端 html word vue.js javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_53862758/article/details/132169934

版权

文章讲述了如何使用JavaScript和JSZip库将HTML内容转换为Word文档，并创建可下载的Word模板，包括创建Blob对象、处理跨域请求以及生成和下载ZIP文件。简化版本仅用于直接下载Word文档的方法也提供了示例。

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

一个需求是一个word模板加入用户填写的数据，需要可以打包下载，

这个时候的想法便是将word模板写成html，再将html转成word然后打包下载

网上搜索说是使用html-to-docx，使用这个会报错，还看到说没有使用mamonth，最后都是不行

直到我发现可以不用插件就完成这个功能，js原生就行

下面便是代码，JSZip是一个压缩的插件

// 创建一个虚拟的HTML文档
      const doc = document.implementation.createHTMLDocument('')
      doc.body.innerHTML = htmlContent

      // 将HTML文档转换为Word
      const wordContent = `<!DOCTYPE html>
      <html xmlns:w="urn:schemas-microsoft-com:office:word">
        <head>
          <meta charset="utf-8">
          <title>Export to Word</title>
          <style>
            /* 在这里添加任何想要的样式 */
            img{max-width:100px;width:100px    ;}
          </style>
        </head>
        <body>
          ${doc.body.innerHTML}
        </body>
      </html>`
      // 创建一个Blob

最低0.47元/天解锁文章