html2canvas 截图空白 与截图不全

时间:2024-04-05 20:27:40
getCanvasPic1() {
  //导出时让最外面DIV滚动在最上面,导出全图
  this.$refs.flow.scrollTop = 0
  html2canvas(this.$refs.flow).then(canvas => {
    // 转成图片,生成图片地址
    this.imgUrl = canvas.toDataURL('image/png')
    let link = document.createElement('a')
    link.href = this.imgUrl
    link.download = this.data[0].sid + '.png'
    link.click()
  })
},

截图的代码就是上边这段,代码没有问题,出现图片不全的问题就在于this.$refs.flow 这个容器:

1.容器大小不够

2.容器中没有内容

这两个问题我都占了

1.容器内容被隐藏

html2canvas 截图空白 与截图不全

  1. f12查看内容发现,手动修改(解决内容被隐藏的问题)

html2canvas 截图空白 与截图不全               html2canvas 截图空白 与截图不全

  1. 2.高度不够的问题

html2canvas 截图空白 与截图不全

html2canvas 截图空白 与截图不全

由此问题便解决了

html2canvas 截图空白 与截图不全