vue项目html导出到word

最新推荐文章于 2024-10-15 15:45:00 发布

忘川a1

最新推荐文章于 2024-10-15 15:45:00 发布

阅读量580

点赞数 1

文章标签： vue.js html word

本文链接：https://blog.csdn.net/bajiutao/article/details/130962645

版权

用到的插件名称 html-docx-js

npm i html-docx-js

封装js方法

import htmlDocx from 'html-docx-js/dist/html-docx'
// 对应插件名 html-docx-js

// 下载文件
function saveAs (blob, fileName) {
  const a = document.createElement('a')
  const url = URL.createObjectURL(blob)

  a.href = url
  a.download = fileName
  a.display = 'none'
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
  URL.revokeObjectURL(url)
}

/**
 *
 * @param element 要打印元素的id
 * @param filename 导出文件名
 */
export function exportword (element, filename) {
  /*
步骤1 ：因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的），
所以先克隆再在克隆的dom上进行操作是不可取的。所以需要在原DOM上生成img，
设置display: none从而使图片不影响页面展示，并插入到对应canvas元素之前（为了保证顺序不变）。
*/
  const app = document.getElementById(element)
  const cloneApp = app.cloneNode(true)
  const canvases = app.getElementsByTagName('canvas')
  const cloneCanvases = cloneApp.getElementsByTagName('canvas')
  const promises = Array.from(canvases).map((ca, index) => {
    return new Promise((res) => {
      const url = ca.toDataURL('image/png', 1)
      const img = new Image()
      img.onload = () => {
        URL.revokeObjectURL(url)
        res()
      }
      img.src = url
      // 插入clone的dom的canvas之前
      cloneCanvases[index].parentNode.insertBefore(img, cloneCanvases[index])
    })
  })

  /*
  步骤2 ：删除掉canvas元素
  */
  // 删除clone的dom中的所有的canvas
  const cloneCanvas = cloneApp.getElementsByTagName('canvas')
  Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca))

  /* 步骤3 ：将dom副本传入插件，生成文件对象，并下载下来 */
  Promise.all(promises).then(() => {
    const converted = htmlDocx.asBlob(`
   <!DOCTYPE html>
    <html lang="en">
      ${document.head.outerHTML}
      <body>
      ${cloneApp.outerHTML}
      </body>
      </html>`)
    saveAs(converted, `${filename}.docx`)
  })
}

需要注意，html的css样式导出不生效，需要使用行内样式!

el-table不生效需要自己写原生table标签