【记录】Vue 点击元素生成图片，并下载

使用条件
cnpm i html2canvas -S

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

template

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

methods

initImage(){
  const {clientWidth,clientHeight} = this.$refs.test.$el;
      //防止保存后的图片出现白边
      const params = {
        scrollY: 0,
        scrollX: 0,
        width: clientWidth,
        height: clientHeight,
        backgroundColor: "transparent",
        useCORS:true,//开启跨域
        allowTaint:true,//图片跨域
   }
  html2canvas(this.$refs.test.$el,params).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()
   });
}