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对象的宽度，我们可以去动态获取他并不能写死..

这样我们导出的图片就可以正常的截图到了！！！

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何利用 vue实现鼠标悬停时显示元素或文本
Vue.js 是一种流行的 JavaScript 框架，可以使 Web 应用程序的开发变得更加轻松和高效，这篇文章主要介绍了在 vue 中鼠标悬停时显示元素或文本,需要的朋友可以参考下
2023-05-05
Vue打包后访问静态资源路径问题
在本篇文章里小编给各位整理的是关于Vue打包后访问静态资源路径问题相关知识点，需要的朋友们学习下。
2019-11-11
详解Vue的键盘事件
这篇文章主要为大家介绍了Vue的键盘事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01
Vue3集成Vue Router从基础配置到项目实践的完整指南
如何在项目中实现页面切换,而不用每次都重新加载整个页面？答案就是 Vue Router,这篇就来聊聊 Vue Router 4.x 在 Vue 3 中的集成与使用,需要的朋友可以参考下
2026-05-05
使用Vue快速实现一个无缝轮播效果
这篇文章主要为大家详细介绍了如何使用Vue快速实现一个无缝轮播效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
2024-04-04
vue+elementUi实现点击地图自动填充经纬度以及地点
这篇文章主要为大家详细介绍了vue+elementUi实现点击地图自动填充经纬度以及地点，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue.js input框之间赋值方法
今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
详解vuex状态管理模式
这篇文章主要介绍了详解vuex状态管理模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
Vue分页器实现原理详解
这篇文章主要为大家详细介绍了Vue分页器实现原理，编写了分页器组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-06-06
一文详解如何在Vue网站中实现多语言支持
在当今全球化的互联网环境中,为网站提供多语言支持已成为提升用户体验和扩大受众范围的关键策略,本文为大家介绍了如何在Vue网站中实现多语种支持功能,有需要的可以了解下
2025-03-03