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

Posted 2021-09-13 XiNine

使用条件
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()
   });
}