html2canvas 截图显示空白及解决方案

最新推荐文章于 2024-07-26 11:09:07 发布

小宋i

最新推荐文章于 2024-07-26 11:09:07 发布

阅读量2.5k

点赞数

文章标签： javascript 前端开发语言 css3 前端框架

本文链接：https://blog.csdn.net/weixin_50641294/article/details/126749070

版权

1.需求

下载页面某个位置的内容，并且页面有滚动条

2.最终实现的完整代码

2.1引入html2canvas

import html2canvas from 'html2canvas'

2.2下载方法

 onExport() {
      const clienWidth = this.$refs.structure.offsetWidth
      const clienHeight = this.$refs.structure.offsetHeight
      const kh = [clienWidth,clienHeight]
      html2canvas(this.$refs.structure,{
        useCORS:true,logging:true,backgroundColor:'#fff',y:this.$refs.structure.offsetTop
      }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')
        this.download(dataURL,kh)
      })
    },
    download(imgUrl,kh) {
      this.getUrlBase64(imgUrl,kh).then((base64) => {
        const link = document.createElement('a')
        link.href = base64
        link.download = 'test.png'
        link.click()
        this.downloading = false
      })
    },
    getUrlBase64(url,kh) {
      return new promise((resolve) => {
        let canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        const img = new Image()
        img.crossOrigin = 'Anonymous'//允许跨域
        img.src = url
        img.onload = () => {
          canvas.height = kh[1]
          canvas.width = kh[0]
          ctx.drawImage(img,0,0,kh[0],kh[1])
          const dataURL = canvas.toDataURL('image/png')
          resolve(dataURL)
        }
      })
    }

3.出现的问题

开始下载，下载内容空白，百度找了解决方案也没用
这是网上解决方案
在这里插入图片描述

4.最终解决方案

把下载时 html2canvas 离y 改为距离页面顶部的位置，y就是从哪里开始截图

  html2canvas(this.$refs.structure,{
        useCORS:true,logging:true,backgroundColor:'#fff',y:this.$refs.structure.offsetTop
      }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')
        this.download(dataURL,kh)
      })