vue中把html转为canvas图片下载

1.全局安装html2canvas
npm install --save html2canvas
2.在需要的页面引入并注册
import html12canvas from ‘html12canvas’
components：{
html12canvas
}，

3.body中写

<el-button @click=““downLoadPic(‘proportionStepTwo’)”>下载

内容

4.在methods方法中写
downLoadPic(domId) {
html2canvas(document.getElementById(domId)).then(canvas => {
//回调中返回的其实就是一个canvas对象
//可以使用canvas的toDataURL方法生成图片链接
//url就是生成的链接可直接写入image标签的src中展示
this.url = canvas.toDataURL(‘image/png’)
// 创建一个a标签
var link = document.createElement(‘a’)
//将生成的图片url赋值给a标签的href属性
link.href = this.url
//设置下载的文件名
link.download = ‘提取图片’
// 将a标签插入dom中
document.body.appendChild(link)
//模拟点击事件触发下载
link.click()
// 完成之后销毁创建的a标签
document.body.removeChild(link)
return
})
},
}