在vue項目中用html2canvas遇到因為有滾動條截圖不完整問題的解決方法(設置height和windowHeight)

最近有業務需求要將某個頁面生成圖片然后將圖片導出,然后我選擇用html2canvas進行圖片生成.

首先安裝html2canvas

npm install html2canvas --save

然后在需要使用的頁面導入html2canvas

import html2canvas from 'html2canvas';

生成圖片及導出的代碼如下

<template>
   <el-dialog id="dialog">
      <el-table></el-table>
      <img />
     <el-button @click="printReport">導出報告</el-button>
   </el-dialog>
</template>

export default {
  methods: {
     printReport() {
        html2canvas(document.getElementById('dialog'), {
          backgroundColor: 'white',
          useCORS: true, //支持圖片跨域
          scale: 1, //設置放大的倍數
        })
          .then((canvas) => {
            // 生成圖片導出
            const a = document.createElement('a');
            a.href = canvas.toDataURL('image/png');
            a.download = this.title;
            a.click();
          })
    }
  }
}    

結果因為頁面有表格有圖片內容比較多,出現了縱向的滾動條,截圖出來的效果只能截取到視圖窗口顯示的部分,超出窗口部分則無法生成.我查了一些資料基本都是建議加上以下代碼,在生成圖片前讓頁面滾動到最頂端.

window.pageYoffset = 0;

document.documentElement.scrollTop = 0;

document.body.scrollTop = 0;

 

但是不知道什么原因,我加上這三行代碼依然無法成功.沒辦法我只能再去翻html2canvas的文檔,研究與高度相關的屬性,最后在設置了如下兩個屬性后問題終於得到解決!

 html2canvas(document.getElementById('dialog'), {
          backgroundColor: 'white',
          useCORS: true, //支持圖片跨域
          scale: 1, //設置放大的倍數
          height: document.getElementById('dialog').scrollHeight, windowHeight: document.getElementById('dialog').scrollHeight
        })