导出分页pdf

exportPDF() {
      const pdf = new jsPDF('p', 'mm', 'a4');
      const printContent = document.getElementById('print-content');
      html2canvas(printContent).then(canvas => {
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 210; // A4纸的宽度(单位:mm)
        const pageHeight = 297; // A4纸的高度(单位:mm)
        const imgHeight = Math.ceil((canvas.height * imgWidth) / canvas.width);
        let heightLeft = imgHeight;
        let position = 0;
        const getPageContent = () => {
          pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
          // 如果内容高度不超出一页,直接保存并退出
          if (heightLeft <= pageHeight) {
            pdf.save('export.pdf');
            return;
          }
          pdf.addPage();
          heightLeft -= pageHeight;
          position = -heightLeft*1.5;
          getPageContent();
        };
        getPageContent();
      });
    },
  1. 在添加图像之前,先判断内容高度是否超出一页。如果内容高度不超出一页,直接保存PDF并退出递归。

  2. 在创建新页面之前,先检查是否还有剩余的高度需要分页。如果有剩余高度,则调用pdf.addPage()添加新页面。

  3. position设置为-heightLeft,以确保下一页从当前页的左下方开始截断。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

SKMA

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值