React中使用jsPDF生成PDF时段落被分页截断，如何优化分页与页面高度？

针对你遇到的段落被分页拆分的问题，提供以下几种可行的解决方案：

方案一：用CSS禁止段落内分页 #

给所有<p>标签添加pageBreakInside: "avoid"样式，让jsPDF渲染时尽量避免在段落内部拆分页面：

let element = (
  <div style={{ textAlign: "left", width:"600px"}}>
         <p style={{fontSize: "10px", color:"#000", pageBreakInside: "avoid"}}>
            text text....................
         </p>
        <p style={{fontSize: "10px", color:"#000", pageBreakInside: "avoid"}}>
            text text.........................
         </p>
  </div>
);

该CSS属性是jsPDF的html方法支持的标准分页控制属性，能有效阻止段落被跨页截断。

方案二：优化jsPDF的html配置参数 #

调整doc.html的配置项，启用智能分页并设置合理的边距，让内容适配页面可用空间：

const doc = new jsPDF("p", "pt", "a4");
const pageHeight = doc.internal.pageSize.getHeight();
const margin = 40; // 设置上下边距为40pt

doc.html(ReactDOMServer.renderToString(element), {
  callback: function (doc) {
    doc.save('AgreementLetter.pdf');
  },
  margin: margin,
  autoPaging: 'text', // 启用基于文本块的智能分页
  y: margin, // 内容起始y坐标
  height: pageHeight - 2 * margin // 限制内容可用高度
});

autoPaging: 'text'会让jsPDF优先在文本块之间分页，而非粗暴地按页面高度截断，配合边距设置能大幅减少段落截断情况。

方案三：手动计算高度控制分页（复杂场景适用） #

如果前两种方法无法满足需求，可以手动计算每个段落的高度，判断是否需要分页后再绘制内容：

const doc = new jsPDF("p", "pt", "a4");
const margin = 40;
const pageHeight = doc.internal.pageSize.getHeight();
let currentY = margin;
const fontSize = 10;
const contentWidth = 600; // 和element的宽度一致

doc.setFontSize(fontSize);

// 把段落内容提取为数组（可根据实际情况从element中解析）
const paragraphs = [
  "text text....................",
  "text text........................."
];

paragraphs.forEach(text => {
  // 计算当前段落的高度
  const textDimensions = doc.getTextDimensions(text, { maxWidth: contentWidth });
  const textHeight = textDimensions.h;

  // 检查当前页面剩余空间是否足够显示段落
  if (currentY + textHeight > pageHeight - margin) {
    doc.addPage();
    currentY = margin;
  }

  // 绘制段落
  doc.text(text, margin, currentY, { maxWidth: contentWidth });
  // 添加段落间距
  currentY += textHeight + 10;
});

doc.save('AgreementLetter.pdf');

这种方式完全由开发者控制分页逻辑，适合需要精确布局的复杂场景，但需要提前提取段落文本内容。

内容的提问来源于stack exchange，提问作者Muhammad Shafique Attari