解决html2canvas在element-ui 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
      })

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

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值