前端将html转word

最新推荐文章于 2024-04-19 11:36:49 发布

更何况不过刚好

最新推荐文章于 2024-04-19 11:36:49 发布

阅读量367

点赞数

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

本文链接：https://blog.csdn.net/weixin_53862758/article/details/132169934

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一个需求是一个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对象
      const blob = new Blob([wordContent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
      this.visible = false
      console.log(blob, 'data')
      // 创建一个新的ZIP实例
      const zip = new JSZip()
      console.log(new Blob([urls[0]]), 'new Blob([urls[0]])')
      zip.file('福建省职业技能鉴定申请表.docx', blob)
      // const imageBlob = await fetch(urls[0], { mode: 'cors' }).then(res => res.blob())
      // const imageBlob2 = await fetch(urls[1], { mode: 'cors' }).then(res => res.blob())

      // zip.file('身份证.jpg', imageBlob)
      // zip.file('身份证2.jpg', imageBlob2)
      // console.log(htmlContent, 'convertedDocx', imageBlob, 'img', urls[0])

      // 生成ZIP文件并下载
      zip.generateAsync({ type: 'blob' }).then((content) => {
        // 创建一个下载链接
        const a = document.createElement('a')
        const url = URL.createObjectURL(content)
        a.href = url
        a.download = 'files.zip'
        a.click()

        // 释放URL对象
        URL.revokeObjectURL(url)
      })

如果只需要下载word，不需要压缩，可以是下面的代码

 //   // 创建一个虚拟的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对象
      const blob = new Blob([wordContent], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
   // 创建一个a标签
        const link = document.createElement('a')
        link.href = URL.createObjectURL(blob)
         link.download = 'export.doc'

      //   // 模拟点击下载链接
         // link.click()

      //   // 释放URL对象
         URL.revokeObjectURL(link.href)
         console.log(blob, '', link)

更何况不过刚好

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
前端将html转word

网上搜索说是使用html-to-docx，使用这个会报错，还看到说没有使用mamonth，最后都是不行。这个时候的想法便是将word模板写成html，再将html转成word然后打包下载。一个需求是一个word模板加入用户填写的数据，需要可以打包下载，如果只需要下载word，不需要压缩，可以是下面的代码。直到我发现可以不用插件就完成这个功能，js原生就行。下面便是代码，JSZip是一个压缩的插件。
复制链接

扫一扫