Solve the problem of incomplete screenshots using html2canvas

The requirement is to convert html to PDF download

Implementation

利用 html2canvas 工具将html转为图片流               npm install html2canvas
利用 jspdf 工具 将图片流转为 pdf 并保存                npm install jspdf     

Encountered a problem

1. The screenshot is incomplete
. I haven’t used this before. After searching the code on the Internet, I found that the screenshot will be incomplete when there is a scroll bar. It can only show the content displayed on the current page. Similar to this situation, this is the html with scroll bar , the first and second pictures are the display of the scroll bar at the top and the bottom respectively.

After downloading it as a pdf, it is like this, only the part displayed in the window, and there is no content other than the scroll bar

. After Baidu, there is a parameter change and scrolling The bar scrolled to the top. I feel that it is not my problem. My intuition is that there is something wrong with the height of the element. The original page element is written like this. Compared with the downloaded file, the height of the content is about the same as the height of the outermost div. The height of the outer box is fixed, so I tried to add a div inside without setting the height, so that its height is completely expanded by the content, and the problem is solved

<div class="red-div" id="pdfDom_children">  // 这里是滚动的div
      <div class="first-div"></div>
      <div class="second-div"></div>
      <div>111</div>
 </div>

Modified page elements

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

Specific packaging code

// 导出页面为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, //设置放大的倍数
      // height: targetDom.clientHeight,  // 网上原来的设置，没用，注释掉了
      // width: targetDom.clientWidth,  // 网上原来的设置，没用，注释掉了
      // windowHeight: targetDom.clientHeight,  // 网上原来的设置，没用，注释掉了
    }).then((canvas) => {
    
    
      //内容的宽度
      const contentWidth = canvas.width;
      //内容的高度
      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转图片数据
      const pageData = canvas.toDataURL("img/jpeg", 1.0);
      //新建JSPDF对象
      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;