使用jsPDF v2.5.1生成PDF时内容跨页截断问题求助

方法1：手动拆分文本并控制分页 #

利用splitTextToSize将长文本拆分为适配页面宽度的行数组，逐行检查剩余页面空间，不足时自动新增页面：

const doc = new jsPDF();
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const margin = 20;
let yPos = margin;
const lineHeight = 10; // 根据字体大小调整

// 替换为你的动态文本
const dynamicText = "这里是需要生成PDF的长动态内容，可能包含多行文本，需要避免跨页截断...";

// 拆分文本为适配页面宽度的行
const splitLines = doc.splitTextToSize(dynamicText, pageWidth - 2 * margin);

splitLines.forEach(line => {
  // 检查当前行是否会超出页面底部
  if (yPos + lineHeight > pageHeight - margin) {
    doc.addPage();
    yPos = margin; // 重置新页的Y轴起始位置
  }
  doc.text(line, margin, yPos);
  yPos += lineHeight;
});

doc.save("result.pdf");

方法2：使用jsPDF-autotable插件（推荐结构化内容） #

如果你的动态数据是表格或结构化段落，jsPDF-autotable插件会自动处理分页，避免内容截断。

1. 安装插件：

npm install jspdf-autotable

2. 使用示例：

import jsPDF from 'jspdf';
import 'jspdf-autotable';

const doc = new jsPDF();

// 替换为你的动态数据
const dynamicData = [
  ["分类1", "短内容"],
  ["分类2", "非常长的内容，插件会自动将超出当前页的部分移到下一页，不会出现截断情况..."],
  // 更多数据项
];

doc.autoTable({
  head: [["标题", "内容"]],
  body: dynamicData,
  margin: { top: 20 },
  styles: { fontSize: 10, lineHeight: 1.2 }
});

doc.save("structured-result.pdf");

方法3：自定义内容块空间检查 #

针对独立的文本块（如段落、卡片），先计算内容高度，再判断是否能放入当前页剩余空间：

const doc = new jsPDF();
const margin = 20;
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
let currentY = margin;
const lineHeight = 10;

function addSafeTextBlock(text) {
  // 计算文本块的总行数和总高度
  const textWidth = doc.getTextWidth(text);
  const totalLines = Math.ceil(textWidth / (pageWidth - 2 * margin));
  const blockHeight = totalLines * lineHeight;

  // 剩余空间不足则新增页面
  if (currentY + blockHeight > pageHeight - margin) {
    doc.addPage();
    currentY = margin;
  }

  doc.text(text, margin, currentY);
  currentY += blockHeight + 5; // 文本块之间的间距
}

// 调用方法添加动态内容
addSafeTextBlock("第一个动态文本块...");
addSafeTextBlock("第二个超长动态文本块，会自动检查分页避免截断...");

doc.save("custom-block.pdf");

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