解决html2canvas在element-ui el-dialog中因滚动条截图不全问题

最新推荐文章于 2025-12-07 09:40:13 发布

原创最新推荐文章于 2025-12-07 09:40:13 发布 · 2.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ui #elementui #vue.js

本文记录了如何在使用html2canvas截取带有滚动条元素的el-dialog内容时，遇到截图不全的问题，分享了通过调整滚动位置临时解决的技巧，并寻求大佬们的更优解决方案。

关于html2canvas截图不全的问题，网上也有很多解决方法，我这里只是记录一下

大佬提了一个给el-dialog里面的内容生成截图的需求，很简单嘛！用html2canvas几行代码就搞定了，然后测试反馈说偶尔会出现截图不全的问题，尝试着复现了一下发现只要出现了滚动条就会出现截图不全，好了，直接上代码吧

     // 先把滚动前的位置记录一下 
     const scrollTop = document.documentElement.scrollTop
       // 加上这几行代码就好了
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
      html2canvas(this.$refs.qrImgUrl, {
        backgroundColor: '#FFFFFF',
        useCORS: true,
        width: 300,
        height: 450
      }).then(canvas => {
        var imgData = canvas.toDataURL('image/png')
        this.imgData = imgData
        var a = document.createElement('a')
        var event = new MouseEvent('click')
        a.href = this.imgData
        a.download = this.name ? this.name : '二维码'
        a.dispatchEvent(event)
        // 截完图后再把位置滚动到之前的位置
        document.documentElement.scrollTop = scrollTop
      })

大佬如果有更好的解决办法，可以留下你评论，万分感激！