使用html2canvas截圖不全問題的解決辦法

更新時(shí)間：2023年07月11日 09:05:46 作者：GXT963

這篇文章主要給大家介紹了關(guān)于使用html2canvas截圖不全問題的解決辦法,最近在項(xiàng)目中遇到一個(gè)需求,需要提供網(wǎng)頁截圖的功能,這里將遇到的問題分享給大家,需要的朋友可以參考下

實(shí)現(xiàn)方法

利用 html2canvas 工具將html轉(zhuǎn)為圖片流 npm install html2canvas
利用 jspdf 工具將圖片流轉(zhuǎn)為 pdf 并保存 npm install jspdf

遇見問題

1、截圖不全

之前沒用過這個(gè)，網(wǎng)上找了代碼之后發(fā)現(xiàn)有滾動(dòng)條的情況下會(huì)截圖不全，僅能展示出當(dāng)前頁面展示出來的內(nèi)容，類似于這種情況，這是帶滾動(dòng)條的html，第一張和第二張分別為滾動(dòng)條在頂部以及在底部的展現(xiàn)

下載成pdf之后分別為這樣，只有窗口展示的部分，滾動(dòng)條以外的內(nèi)容沒有

百度之后有讓改參數(shù)的，也有讓滾動(dòng)條滾至頂部的，感覺都不是我的問題，直覺說是元素高度哪里有問題，原來的頁面元素是這么寫的，對(duì)比下載后的文件，內(nèi)容高度大概和最外面的div高度是一樣的，外面盒子的高度又是固定的，本人就試了下在里面再加一個(gè)div，且不設(shè)置高度，讓其高度完全由內(nèi)容撐開，問題就解決了

<div class="red-div" id="pdfDom_children">  // 這里是滾動(dòng)的div
      <div class="first-div"></div>
      <div class="second-div"></div>
      <div>111</div>
 </div>

修改后的頁面元素

<div class="red-div">
      <div id="pdfDom_children">
        <div class="first-div"></div>
        <div class="second-div"></div>
        <div>111</div>
      </div>
</div>

具體封裝代碼

// 導(dǎo)出頁面為PDF格式
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
const htmlToPdf = {
  getPdf(title: string) {
    const targetDom = document.getElementById("pdfDom_children");
    html2canvas(document.querySelector("#pdfDom_children"), {
      allowTaint: true,
      backgroundColor: "white",
      useCORS: true, //支持圖片跨域
      scale: 1, //設(shè)置放大的倍數(shù)
      // height: targetDom.clientHeight,  // 網(wǎng)上原來的設(shè)置，沒用，注釋掉了
      // width: targetDom.clientWidth,  // 網(wǎng)上原來的設(shè)置，沒用，注釋掉了
      // windowHeight: targetDom.clientHeight,  // 網(wǎng)上原來的設(shè)置，沒用，注釋掉了
    }).then((canvas) => {
      //內(nèi)容的寬度
      const contentWidth = canvas.width;
      //內(nèi)容的高度
      const contentHeight = canvas.height;
      //一頁pdf顯示htm1頁面生成的canvas高度，a4紙的尺寸[595.28,841.89];
      const pageHeight = (contentWidth / 592.28) * 841.89;
      //未生成pdf的htm1頁面高度
      let leftHeight = contentHeight;
      //頁面偏移
      let position = 0;
      //a4紙的尺寸[595.28,841.89],htm1頁面生成的canvas在pdf中圖片的寬高
      const imgwidth = 595.28;
      const imgHeight = (592.28 / contentWidth) * contentHeight;
      //canvas轉(zhuǎn)圖片數(shù)據(jù)
      const pageData = canvas.toDataURL("img/jpeg", 1.0);
      //新建JSPDF對(duì)象
      const PDF = new JsPDF("", "pt", "a4");
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, "JPEG", 0, 0, imgwidth, imgHeight);
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, "JPEG", 0, position, imgwidth, imgHeight);
          leftHeight -= pageHeight;
          position -= 841.89;
          if (leftHeight > 0) {
            PDF.addPage();
          }
        }
      }
      console.log(pageData); //保存文件
      PDF.save(title + ".pdf");
    });
  },
};
export default htmlToPdf;