vue利用html2canvas将HTML导出为图片

项目控制台执行命令安装 html2canvas

npm install html2canvas --save

安装完成之后直接引入就可以用了

import html2canvas from 'html2canvas'

/*
* element  导出的元素
* filename 文件名
* ext      扩展文件名
*/
export function ExportImg(element, filename, ext) {
  html2canvas(element, {
    useCORS: true
  }).then((canvas) => {
    if (navigator.msSaveBlob) {
      const blob = canvas.msToBlob() // IE10+
      return navigator.msSaveBlob(blob, name)
    } else {
      const imageurl = canvas.toDataURL('image/png')
      const aLink = document.createElement('a') // 创建a标签
      aLink.style.display = 'none'
      aLink.href = imageurl
      aLink.download = `${filename}.${ext}` // 下载文件名
      document.body.appendChild(aLink)
      aLink.click()
      document.body.removeChild(aLink) // 用完后移除元素
    }
  })
}

 使用=>HTML部分

<div ref="ExportDiv">导出内容</div>

使用=>JS部分

import { ExportImg } from '@/vendor/Export2Image'

ExportImg() { // 导出图片
      ExportImg(this.$refs.ExportDiv, `导出示例`, 'png')
    }

官网地址: html2canvas官网地址