vue把页面转换成图片导出方式(html2canvas导出不全问题)
作者：我不是靓仔啊
这篇文章主要介绍了vue把页面转换成图片导出方式(html2canvas导出不全问题),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
把页面转换成图片导出(html2canvas导出不全)
htmlcanvas
html2canvas - Screenshots with JavaScript
我们基本都是使用这个插件去把dom对象导出为图片
html2canvas(this.$refs.imageWrapper).then(canvas => {
this.isShowScroll = true
const link = document.createElement('a')
link.href = canvas.toDataURL()
link.setAttribute('download', this.$t('report.question_tip8') + '.png')
link.style.display = 'none'
document.body.appendChild(link)
link.click()
})<div ref="imageWrapper">
。。。。
</div>但是这样却有一个弊端，只能截取可视区域的dom对象，就是说超出屏幕的内容我们会截图不到
查看html2canvas文档我们发现
我们可以设置导出的canvas的图片
html2canvas(this.$refs.imageWrapper, {width: this.artWidth}).then(canvas => {这宽度就是我们要拿到那个超出100vw的dom对象的宽度，我们可以去动态获取他并不能写死..
这样我们导出的图片就可以正常的截图到了！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。