vue把页面转换成图片导出方式(html2canvas导出不全问题)
更新时间：2023年10月30日 09:07:24 作者：我不是靓仔啊
这篇文章主要介绍了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对象的宽度，我们可以去动态获取他并不能写死..
这样我们导出的图片就可以正常的截图到了！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue2.0设置全局样式(less/sass和css)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了安装vue-cli报错 -4058 的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
今天小编就为大家分享一篇vue element table 表格请求后台排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue上传文件formData入参为空,接口请求500的解决
这篇文章主要介绍了vue上传文件formData入参为空,接口请求500的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue如何遍历data所有变量并赋值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇VUE.js实现动态设置输入框disabled属性，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了Vue进阶构造属性，从4个方面来进行讲解：Directive、Mixin 混入、Extends 继承、provide 和 inject，感兴趣的小伙伴们，赶快来看一下2021-05-05
Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论