React中使用jsPDF生成多页PDF时内容截断问题求助

针对jsPDF html() 方法的截断问题 #

1. 优化自动分页策略与边距配置 #

当前使用的autoPaging: "slice"会直接切割内容，极易导致行或表格截断，建议替换为更智能的分页策略：

var pdf = new jsPDF({
  orientation: "portrait",
  unit: "mm",
  format: "a4"
});

pdf.html(html_element, {
  callback: function (doc) {
    doc.save();
  },
  x: 15,
  autoPaging: "smart", // 替换slice为smart（智能避免元素截断）或text（针对文本优化）
  y: 15,
  width: 170,
  windowWidth: 650,
  margin: [10, 7, 10, 7], // 确保顺序为[上, 左, 下, 右]
  // 可选：自定义分页规则，避免表格行被截断
  pageBreak: function({ node }) {
    if (node.tagName === 'TR') {
      return true; // 表格行单独分页，避免截断
    }
    return false;
  }
});

2. 添加CSS分页辅助样式 #

给易被截断的元素添加CSS属性，让渲染引擎自动处理分页：

/* 全局分页优化样式 */
.truncate-prevent {
  page-break-inside: avoid; /* 禁止元素内部分页 */
  page-break-after: auto; /* 自动在元素后触发分页 */
}

/* 针对表格的特殊处理 */
table {
  page-break-inside: avoid;
}
tr {
  page-break-inside: avoid;
}

将上述类名添加到对应的HTML元素上，比如<table class="truncate-prevent">。

针对html2canvas无法设置底部边距的问题 #

使用html2canvas时，手动计算每页可绘制区域，避免内容超出底部边距：

import html2canvas from 'html2canvas';

async function generatePDF() {
  const pdf = new jsPDF({
    orientation: "portrait",
    unit: "mm",
    format: "a4"
  });
  const pageWidth = pdf.internal.pageSize.getWidth();
  const pageHeight = pdf.internal.pageSize.getHeight();
  const margin = { top: 10, bottom: 10, left:7, right:7 };
  // 计算每页可绘制的宽高
  const usableHeight = pageHeight - margin.top - margin.bottom;
  const usableWidth = pageWidth - margin.left - margin.right;

  // 生成canvas图片
  const canvas = await html2canvas(html_element, {
    scale: 2, // 提升PDF清晰度
    useCORS: true
  });
  const imgData = canvas.toDataURL('image/png');
  const imgWidth = usableWidth;
  const imgHeight = (canvas.height * imgWidth) / canvas.width;

  let heightLeft = imgHeight;
  let position = margin.top;

  // 添加第一页
  pdf.addImage(imgData, 'PNG', margin.left, position, imgWidth, imgHeight);
  heightLeft -= usableHeight;

  // 分页处理剩余内容
  while (heightLeft >= 0) {
    position = margin.top - heightLeft;
    pdf.addPage();
    pdf.addImage(imgData, 'PNG', margin.left, position, imgWidth, imgHeight);
    heightLeft -= usableHeight;
  }

  pdf.save('document.pdf');
}

额外注意事项 #

• 尽量使用mm或%作为HTML元素的单位，避免固定px导致渲染尺寸不匹配；若必须用px，可提前转换为mm（1px ≈ 0.264583mm）。
• 简化复杂HTML结构（如浮动、绝对定位元素），这类样式容易导致jsPDF渲染异常。

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