html2canvas、jspdf实现页面导出包括滚动条非可视区域

1、安装依赖

html2canvas、jspdf

2、pdf.js

内容放在最后

非可视区域导出核心：

3、样式及使用

pdf.js内容：

import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
// 导出函数

export function getPdfFromHtml(ele, pdfFileName) {
  ele.style.height = ele.scrollHeight + "px"; // 获取元素的滚动高度，用于截取被滚动条隐藏的部分

  html2Canvas(ele, {
    dpi: window.devicePixelRatio * 4,
    scale: 4,
    useCORS: true, //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
    allowTaint: false,
    height: ele.offsetHeight,
    width: ele.offsetWidth,
    windowWidth: document.body.scrollWidth,
    windowHeight: document.body.scrollHeight
  }).then(canvas => {
    const _this = this;
    ele.style.height = ele.clientHeight + "px"; // 获取元素的实际高度，不包括滚动条隐藏的部分

    //未生成pdf的html页面高度
    var leftHeight = canvas.height;
    var a4Width = 595.28;
    var a4Height = 841.89;
    //一页pdf显示html页面生成的canvas高度;
    var a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height);
    //pdf页面偏移
    var position = 0;
    var pageData = canvas.toDataURL("image/jpeg", 1.0);
    var pdf = new JsPDF("x", "pt", "a4");
    var index = 1,
      canvas1 = document.createElement("canvas"),
      height;
    pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");

    function createImpl(canvas) {
      if (leftHeight > 0) {
        index++;
        var checkCount = 0;
        if (leftHeight > a4HeightRef) {
          var i = position + a4HeightRef;
          for (i = position + a4HeightRef; i >= position; i--) {
            var isWrite = true;
            for (var j = 0; j < canvas.width; j++) {
              var c = canvas.getContext("2d").getImageData(j, i, 1, 1).data;
              if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {
                isWrite = false;
                break;
              }
            }
            if (isWrite) {
              checkCount++;
              if (checkCount >= 10) {
                break;
              }
            } else {
              checkCount = 0;
            }
          }
          height =
            Math.round(i - position) || Math.min(leftHeight, a4HeightRef);
          if (height <= 0) {
            height = a4HeightRef;
          }
        } else {
          height = leftHeight;
        }

        canvas1.width = canvas.width;
        canvas1.height = height;

        var ctx = canvas1.getContext("2d");
        ctx.drawImage(
          canvas,
          0,
          position,
          canvas.width,
          height,
          0,
          0,
          canvas.width,
          height
        );
        var pageHeight = Math.round((a4Width / canvas.width) * height);
        if (position != 0) {
          pdf.addPage();
        }
        pdf.addImage(
          canvas1.toDataURL("image/jpeg", 1.0),
          "JPEG",
          5,
          0,
          a4Width,
          (a4Width / canvas1.width) * height
        );

        leftHeight -= height;
        position += height;
        if (leftHeight > 0) {
          //添加全屏水印
          // const base64 = ''
          // for(let i=0;i<6;i++){
          //   for(let j=0;j<5;j++){
          //     const  left = (j*120)+20;
          //     pdf.addImage(base64,'JPEG', left, i*150, 20, 30);
          //   }
          // }
          setTimeout(createImpl, 500, canvas);
        } else {
          this.pdfSave = pdf.save(pdfFileName + ".pdf");
        }
      }
    }
    //当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < a4HeightRef) {
      pdf.addImage(
        pageData,
        "JPEG",
        5,
        0,
        a4Width,
        (a4Width / canvas.width) * leftHeight
      );
      // this.dialogVisible = true;
      this.pdfSave = pdf.save(pdfFileName + ".pdf");
    } else {
      try {
        pdf.deletePage(0);
        setTimeout(createImpl, 500, canvas);
      } catch (err) {
        console.log(err);
      }
    }
  });
}