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)
})

 

這樣就行了！