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对象的宽度，我们可以去动态获取他并不能写死..
这样我们导出的图片就可以正常的截图到了！！！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文介绍了Pinia的使用方法及如何实现状态持久化存储,首先,介绍了Pinia的安装和在main.ts中的挂载,介绍了getters和actions的使用方法,最后,详细说明了如何通过Pinia-plugin-persistedstate插件实现Pinia状态的持久化处理,包括插件的安装、配置和在main.ts文件中的注册2024-10-10
这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下2023-08-08
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期2022-11-11
这篇文章主要介绍了Animate.css在vue中的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
lottie实现vue自定义loading指令及常用指令封装详解
这篇文章主要为大家介绍了lottie实现vue自定义loading指令及常用指令封装，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下2023-01-01
仿照e签宝,实现pdf电子签章 => 拿到pdf链接,移动章的位置,获取章的坐标,怎么实现呢,下面小编给大家介绍vue2实现pdf电子签章问题记录,感兴趣的朋友一起看看吧2023-12-12
Vue.js作为现代前端开发中的佼佼者,其组件系统是构建高效、灵活和可扩展用户界面的关键,本文带大家深度探索 Vue.js 组件的核心奥义,感兴趣的小伙伴可以了解下2024-12-12
这篇文章主要为大家详细介绍了vue滚动轴插件better-scroll的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
本篇文章主要介绍了Vue.use自定义自己的全局组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论