526互联

借助html2canvas下载图片，有滚动条的情况显示不全的问题

发布时间 2023-09-06 14:57:57作者: WinniVVV

我自己的遇到的情况是将页面的一个小窗口里边的内容生成图片下载，

试了网上搜到的几个方法都没有生效，

最后自己用了个取巧的方法：通过调整overflow-y来解决这个问题。

downloadItem() {
      const targetDom = document.getElementById(`image-${this.dialogNo}`)
      targetDom.style.overflowY = 'visible'
      html2canvas(targetDom, {
        useCORS: true,
        backgroundColor: '#ffffff',
        height: targetDom.scrollHeight,
        windowHeight: targetDom.scrollHeight
      }).then(canvas => {
        const canvasImg = canvas.toDataURL('image/png')
        ...
        targetDom.style.overflowY = 'auto'
      })
    }