jsPdf生成内容满页后出现多余空白页问题如何解决

核心原因 #

• DOM渲染缩放比例不匹配：你配置的windowWidth: 1000和PDF内容宽度width: 140（单位mm）没有对应，jsPDF底层用html2canvas渲染DOM时，会先按windowWidth的宽度生成画布，再缩放到140mm放入PDF，缩放偏差会导致计算出的总内容高度远大于实际高度，自动分页时会把多余的高度识别为新的空白页。
• 自动分页未适配边距：默认自动分页逻辑没有减去你设置的x:10、y:10边距，每页可用高度计算错误，高度偏差累积后就会多生成多页空白。
• 源DOM存在多余占位元素：目标DOM#reports如果包含空标签、隐藏元素、底部多余margin/padding，都会被算入总渲染高度，产生空白占位。

修复方案 #

调整配置参数，添加DOM预处理和空白页兜底删除逻辑，参考代码如下：

const doc = new jsPDF({ format: 'a4' });
const source = document.getElementById("reports");
doc.setFont("arial", "normal");
doc.setFontSize(5);
// 预计算A4页面可用高度（A4总高297mm，上下各留10mm边距）
const a4Height = doc.internal.pageSize.getHeight();
const availableHeight = a4Height - 20;

doc.html(source, {
  callback: function(doc) {
    // 兜底逻辑：删除末尾所有空白页
    const totalPages = doc.getNumberOfPages();
    for (let i = totalPages; i >= 1; i--) {
      doc.setPage(i);
      // 检测页面是否无实际内容
      const pageContent = JSON.stringify(doc.internal.pages[i]);
      if (pageContent.includes('/Tx []') || pageContent.length < 50) {
        doc.deletePage(i);
      } else {
        break; // 遇到非空白页即停止
      }
    }
    doc.save();
  },
  x: 10,
  y: 10,
  width: 140,
  // 1mm≈3.7795px，windowWidth和PDF内容宽度对应，避免缩放偏差
  windowWidth: 140 * 3.7795,
  // 开启智能分页，避免空白内容触发分页
  autoPaging: 'text',
  // 统一配置边距，自动分页时会自动扣减边距计算可用高度
  margin: [10, 10, 10, 10],
  html2canvas: {
    scale: 2,
    useCORS: true,
    // 渲染前预处理克隆的DOM，删除多余空白元素
    onclone: (clonedDoc) => {
      const clonedTarget = clonedDoc.getElementById('reports');
      // 移除空标签、隐藏元素
      clonedTarget.querySelectorAll('*:empty, [style*="display:none"], [style*="visibility:hidden"]').forEach(el => el.remove());
      // 清除DOM自带的内外边距，避免额外高度计算
      clonedTarget.style.margin = '0';
      clonedTarget.style.padding = '0';
    }
  }
});

额外注意项 #

• 给目标DOM#reports添加overflow: hidden样式，避免滚动条或溢出内容被计入渲染高度。
• 不要给#reports设置远大于实际内容的固定高度，避免产生空白占位。

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