vue项目中使用html2canvas截图不全的问题
原因:横向滚动轮造成,因为html2canvas是根据body进行截图,若内容宽度长于body时,就会出现这样的问题(大概意思就是有滚动条时造成的)
解决方案:(首先是获取你要截取页面的父div,通过clone并紧随于body之后,在生成幕布的时候不再拿着父div去截取,而是截取clone的div,这样的话,就可以实现整个页面的截取了。)
/* 导出图片 */
derivePicture () {
var width = this.$refs.imageDom.style.width
var cloneDom = this.$refs.imageDom.cloneNode(true)
cloneDom.style.position = 'absolute'
cloneDom.style.top = '0px'
cloneDom.style.zIndex = '-1'
cloneDom.style.width = width
document.body.appendChild(cloneDom)
html2canvas(cloneDom).then(canvas => {
// 转成图片,生成图片地址
var imgUrl = canvas.toDataURL('image/png')
var eleLink = document.createElement('a')
eleLink.href = imgUrl // 转换后的图片地址
eleLink.download = 'pictureName'
// 触发点击
document.body.appendChild(eleLink)
eleLink.click()
// 然后移除
document.body.removeChild(eleLink)
})
cloneDom.style.display = 'none'
},