Vue截取对应区域界面并下载为图片

第一步：yarn add html2canvas

第二步：import html2canvas from 'html2canvas'

第三步：在文件中引用组件

components: {
  html2canvas
}

第四步：在点击事件里写入以下事件

例如：

<div ref="tupuPicture">要保存成为图片的区域</div>

<el-button @click="keepPicture">保存</el-button>

    //保存图片
    keepPicture() {
      html2canvas(this.$refs.tupuPicture).then(canvas => {
         // 获取生成的图片的url,并设置为png格式
        const imgUrl = canvas.toDataURL("png"); 
        let creatDom = document.createElement('a')
        document.body.appendChild(creatDom)
        creatDom.href = imgUrl
         //设置生成图片的名称
        creatDom.download = '图片名字'
        creatDom.click()
      })
    },