jsPdf表格后插入文本时如何计算指定maxWidth的文本高度判断是否换页

核心实现逻辑 #

• 借助jsPDF内置的splitTextToSize()方法，按你设置的maxWidth将文本自动拆分为适配宽度的多行数组，拆分规则和实际渲染文本时的规则完全一致，会自动匹配当前设置的字体、字号、行高参数
• 计算单行文本高度后乘以行数，即可得到文本的实际总高度
• 对比当前页面剩余可用高度和文本总高度，判断是否需要新增页面

完整实现示例 #

基础版本（适配jsPDF 2.x及以上） #

// 初始化jsPDF实例，示例为纵向、单位mm、A4纸
const doc = new jsPDF('p', 'mm', 'a4');
const pageWidth = doc.internal.pageSize.getWidth();
const pageHeight = doc.internal.pageSize.getHeight();
const margin = 10; // 页面通用边距，可自行调整
const textMaxWidth = pageWidth - margin * 2; // 文本最大宽度

// 待插入的动态文本
const dynamicText = "你需要插入的任意长度文本内容，支持自动换行计算高度...";

// 步骤1：按maxWidth拆分文本为多行数组
const splitTextArr = doc.splitTextToSize(dynamicText, textMaxWidth);
// 步骤2：计算单行文本高度，getLineHeight返回pt单位，转换为mm（1pt≈0.3528mm）
const singleLineHeight = doc.getLineHeight() / 2.8346;
// 步骤3：计算文本总高度
const textTotalHeight = singleLineHeight * splitTextArr.length;

// 步骤4：判断是否需要新增页面
const currentCursorY = doc.getY(); // 获取当前内容渲染的y轴坐标
const availableHeight = pageHeight - currentCursorY - margin; // 页面剩余可用高度
if (availableHeight < textTotalHeight) {
  doc.addPage(); // 剩余高度不足，新增页面
  doc.setY(margin); // 新页面从顶部边距位置开始渲染
}

// 插入文本
doc.text(splitTextArr, margin, doc.getY());

旧版本兼容版本（jsPDF 1.x版本） #

如果使用的是1.x版本没有getLineHeight()方法，替换单行高度计算逻辑即可：

const fontSize = 12; // 你设置的文本字号，单位pt
const lineHeightRatio = 1.15; // 行高系数，和渲染文本时设置的行高保持一致
const singleLineHeight = (fontSize * lineHeightRatio) / 2.8346;

注意事项 #

• 计算高度前必须确保字体、字号、行高的设置和实际渲染文本时的参数完全一致，否则会出现计算偏差
• 如果使用自定义字体，要确保字体加载完成后再执行高度计算和文本渲染操作

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