使用html2canvas和jspdf将页面保存位pdf

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js" ></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.js" ></script>
<button id="topdf">保存为pdf</button>

<div style="width: 600px; margin: 0 auto" id="box">
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>1
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>2
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>3
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>4
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>5
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>6
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>7
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>8
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>9
  <div><img src="./img.png" alt=""><img src="./img.png" alt=""></div>10
</div>
<script>
  var saveBtn = document.querySelector('#topdf');
  var target = document.querySelector('#box');
  saveBtn.addEventListener('click', ()=>{
    html2canvas(target).then((canvas)=>{
      const pageData = canvas.toDataURL('image/jpeg', 1.0);

      const doc = new jspdf.jsPDF({
        orientation: 'p', // 纵向  默认
        unit: 'pt', // 单位用pt
        format: 'a4',
      });
      const a4_width = 595.28; // a4纸的宽度 单位pt
      const a4_height = 841.89; //  a4纸的高度 单位pt
      const contentWidth = canvas.width; // 图片实际宽度
      const contentHeight = canvas.height; // 图片实际高度

      const pageHeight = (contentWidth / a4_width) * a4_height; // 图片的实际宽度是可能大于a4纸的，在这里计算出a4纸一页上能放的实际图片的尺寸， 根据a4纸的宽高比例计算

      let remainedHeight = contentHeight;

      const imgHeight = (a4_width / contentWidth) * contentHeight; // 图片缩放到a4宽度的情况下的图片长度

      remainedHeight -= pageHeight;

      let position = 0;
      doc.addImage(pageData, 'JPEG', 0, position, a4_width, imgHeight); // 截取第一幅图到pdf第一页
      while (remainedHeight >= 0) { // 如果还有图片没有放到pdf，继续增加pdf放置图片剩余内容；
        position = position + a4_height;
        doc.addPage();
        // 可以把 position 看成 background-position； 都是负值来表示向上/向左偏移
        doc.addImage(pageData, 'JPEG', 0, -position, a4_width, imgHeight);
        remainedHeight -= pageHeight;
      }

      doc.save(`下载.pdf`);
    })
  })
</script>

原文地址：http://www.cnblogs.com/walkermag/p/16923669.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性