jsPDF导出HTML时

标签内容分页截断问题解决

问题描述

使用jsPDF将HTML长文本导出为PDF时，

标签内容在分页时被部分截断，尝试手动计算坐标添加页面的代码未解决问题：

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.html($("#sec1")[0], { margin: 30 }).then(() => {
    var noOfPages = pdf.internal.getNumberOfPages();
    var y = (pdf.internal.pageSize.height - 60) * noOfPages; // 减去边距
    pdf.addPage();
    return pdf.html($("#sec2")[0], { y: y, margin: 30 });
}).then(() => {
    var noOfPages = pdf.internal.getNumberOfPages();
    var y = (pdf.internal.pageSize.height - 60) * noOfPages; 
    pdf.addPage();
    return pdf.html($("#sec3")[0], { y: y, margin: 30 });
}).then(() => {
    var data = pdf.output("datauristring");
    pdf.save(data);
});

解决方案

方案1：让jsPDF自动处理分页（推荐）

不需要手动调用addPage和计算y坐标，直接将所有需要导出的内容放入一个统一容器，让jsPDF的html方法自动处理分页逻辑：

1. 页面中创建统一内容容器：

<div id="all-content">
  <div id="sec1">...</div>
  <div id="sec2">...</div>
  <div id="sec3">...</div>
</div>

2. 修改导出代码：

const pdf = new jsPDF('p', 'pt', 'letter');
pdf.html(document.getElementById('all-content'), {
  margin: 30,
  callback: function(pdf) {
    pdf.save('导出文件.pdf');
  }
});

方案2：使用CSS分页断点

如果需要手动控制分页位置，给目标元素添加CSS分页类，利用jsPDF支持的分页规则：

1. 添加CSS样式：

.page-break {
  page-break-after: always;
}

2. 在HTML中插入分页断点：

<div id="sec1">...</div>
<div class="page-break"></div>
<div id="sec2">...</div>
<div class="page-break"></div>
<div id="sec3">...</div>

3. 导出代码直接处理整个内容：

const pdf = new jsPDF('p', 'pt', 'letter');
pdf.html(document.body, {
  margin: 30,
  callback: function(pdf) {
    pdf.save('导出文件.pdf');
  }
});

方案3：修正分段导出的坐标逻辑

如果必须分段处理，不要手动计算y坐标，jsPDF添加新页面后会默认从新页面的边距位置开始渲染：

const pdf = new jsPDF('p', 'pt', 'letter');

pdf.html($("#sec1")[0], { margin: 30 })
.then(() => {
  pdf.addPage();
  return pdf.html($("#sec2")[0], { margin: 30 });
})
.then(() => {
  pdf.addPage();
  return pdf.html($("#sec3")[0], { margin: 30 });
})
.then(() => {
  pdf.save('导出文件.pdf');
});

内容的提问来源于stack exchange，提问作者Paul