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

51次阅读

共计 392 个字符，预计需要花费 1 分钟才能阅读完成。

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

正文完