html2canvas导出带滚动条截取不到超出部分的bug解决

项目需要前端导出一个图片，用了html2canvas插件，但是导出的时候，遇到了一个问题，只能导出当前高度的图片，超出当前高度的就截取不到了像下图这样的:

 查看资料之后，说设置windowHeight 和 height两个参数，但是设置了以后，发现还是有问题，解决办法：

外框再加一层div包裹：

<div class="printContainer"> <!-- 在这一层设置scroll -->
       <div ref="printContainer">
       <!-- 内容区域-->
        </div>
</div>

const domRef = this.$refs.printContainer
const c = document.createElement('canvas')
const scale = 2.5
const opts = {
    scale: scale,
    useCORS: true, // 允许跨域图片
    allowTaint: true, // 允许跨域图片
    logging: true,
    width: domRef.offsetWidth,
    height: domRef.scrollHeight,
   windowHeight: domRef.scrollHeight,
   dpi: window.devicePixelRatio * scale
}
c.width = domRef.offsetWidth * scale
c.height = domRef.scrollHeight * scale
c.getContext('2d').scale(scale, scale)
html2Canvas(domRef, opts).then(canvas => {
   c.mozImageSmoothingEnabled = false
   c.webkitImageSmoothingEnabled = false
   c.msImageSmoothingEnabled = false
   c.ImageSmoothingEnabled = false
   const printImage = canvas.toDataURL('image/png')
   const imageElement = document.createElement('img')
   imageElement.style.width = '100%'
   imageElement.src = printImage
   this.$print(imageElement)
})

 

这样就行了！