使用jsPDF生成PDF开启pagesplit后自定义边距失效问题求助

根因说明 #

addHTML是jsPDF已废弃的旧API，其内置的pagesplit参数存在原生缺陷：仅会将设置的边距应用到第一页，跨页生成的新页面不会继承边距配置，会直接从页面左上角开始渲染内容，导致第二页边距完全失效的问题。

方案1：替换为官方推荐的html()方法（优先选择） #

目前jsPDF官方已使用html()方法替代废弃的addHTML，该方法对分页、边距的适配已经修复了旧API的缺陷，参考代码如下：

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.html(document.querySelector('#print'), {
  margin: [50, 25, 50, 25], // 顺序为上、右、下、左，单位和实例配置的pt一致
  autoPaging: 'text', // 自动分页
  scale: 2.25, // 对应你之前设置的缩放比例
  callback: function (doc) {
    doc.save('print.pdf');
  }
});

该方案无需手动修改internal.scaleFactor属性，直接通过scale配置项设置缩放即可。

方案2：必须保留addHTML时的手动修复方法 #

如果因为旧项目兼容问题无法替换API，可以禁用内置的pagesplit，手动计算内容高度分页并设置每页边距，参考代码如下：

var pdf = new jsPDF('p', 'pt', 'letter');
pdf.internal.scaleFactor = 2.25;
var pageHeight = pdf.internal.pageSize.getHeight();
var margin = {
  top: 50,
  right: 25,
  bottom: 50,
  left: 25
};
// 将DOM像素高度转换为pdf使用的pt单位
var contentHeight = document.querySelector('#print').offsetHeight * pdf.internal.scaleFactor / 96 * 72;
var currentPosition = margin.top;

// 逐页渲染逻辑
function renderPage(offsetY) {
  pdf.addHTML(document.querySelector('#print'), margin.left, offsetY, {}, function () {
    currentPosition += pageHeight - margin.top - margin.bottom;
    if (currentPosition < contentHeight) {
      pdf.addPage();
      renderPage(margin.top);
    } else {
      pdf.save('print.pdf');
    }
  });
}
renderPage(margin.top);

内容的提问来源于stack exchange，提问作者Stacie T.