vue利用html2canvas将指定页面导出为图片详情步骤

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

npm install html2canvas --save

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

创建一个index.js文件

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>
<button @click='btn'>点击导出按钮</button>

使用==>JS部分

import { ExportImg } from '@/vendor/index.js'
methods:{
    btn() { // 导出图片
      ExportImg(this.$refs.ExportDiv, `导出示例`, 'png')
    }
}