关于前端:记录Vue点击元素生成图片并下载

应用条件
cnpm i html2canvas -S

组件中引入
import html2canvas from "html2canvas";

template

<div ref="test" @click="initImage">html2canvas 测试</div>

methods

initImage(){
  html2canvas(this.$refs.test).then((canvas) => {
        const link = document.createElement('a')
        
        link.href = canvas.toDataURL()//能够间接赋值给 img 元素应用
        
        link.setAttribute('download', this.qrCodeTitle + '.png')
        link.style.display = 'none'
        document.body.appendChild(link)
        link.click()
   });
}