html div 导出pdf

嘴对嘴编程
已于 2024-09-28 16:34:58 修改
阅读量300
点赞数 3
文章标签： html pdf 前端
于 2024-09-28 16:07:15 首次发布
本文链接：https://blog.csdn.net/u011703959/article/details/142616754
版权
html div 导出pdf 出处忘了

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link type="text/css" rel="stylesheet" href="./bootstrap-4.3.1/css/bootstrap.min.css">
  <script src="./jquery.min.js"></script>
  <script src="./bootstrap-4.3.1/js/bootstrap.min.js"></script>

  <style>

  </style>

  <script src="./html2canvas.js"></script>
  <script src="./jspdf/jspdf.umd.min.js"></script>
</head>

<body bac>
  <h1>Hello World</h1>
  <p>This is some sample text.</p>
  <button id="export-pdf">Export to PDF</button>
  <div id="abc" style="overflow-y: scroll;height: 800px; background-color: azure;">
    <h1>adf</h1>
    <h1>adf</h1>
    <h1>adf</h1>
    <h1>adf</h1>
    <div>

      <ul class="nav fixedtop">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>

    </div>
    <div class="container">
      <div class="row">
        <div>
          123
        </div>
      </div>
    </div>
    <p>12</p>
    <p>
      lsdfjj sf sdfsdfsdfsdf
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
      sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd sdfkljklsafdddddddddddddddd
    </p>
    <p>
      sdf </p>
    <!-- <img src="./img/jiangxue.png" /> -->
  </div>
  <script>
      document.getElementById('export-pdf').addEventListener('click', function () {
      var ele = document.getElementById('abc');
      getPdfFromHtml(ele, 'scrollable-content.pdf');
    })

    // 导出函数
    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.jsPDF("p", "pt", "a4");
        var index = 1,
          canvas1 = document.createElement("canvas"),
          height;
        pdf.setDisplayMode("fullwidth", "continuous", "FullScreen");

        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 = 841.89;
        var a4Height = 595.28;
        //一页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.jsPDF("l", "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);
          }
        }
      });
    }


  </script>
</body>

</html>