关于html2canvas截图不全的问题,网上也有很多解决方法,我这里只是记录一下
大佬提了一个给el-dialog里面的内容生成截图的需求,很简单嘛!用html2canvas几行代码就搞定了,然后测试反馈说偶尔会出现截图不全的问题,尝试着复现了一下发现只要出现了滚动条就会出现截图不全,好了,直接上代码吧
// 先把滚动前的位置记录一下
const scrollTop = document.documentElement.scrollTop
// 加上这几行代码就好了
window.pageYoffset = 0
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
html2canvas(this.$refs.qrImgUrl, {
backgroundColor: '#FFFFFF',
useCORS: true,
width: 300,
height: 450
}).then(canvas => {
var imgData = canvas.toDataURL('image/png')
this.imgData = imgData
var a = document.createElement('a')
var event = new MouseEvent('click')
a.href = this.imgData
a.download = this.name ? this.name : '二维码'
a.dispatchEvent(event)
// 截完图后再把位置滚动到之前的位置
document.documentElement.scrollTop = scrollTop
})
大佬如果有更好的解决办法,可以留下你评论,万分感激!