React浏览器端PDF填充工具：如何用JS程序化调整表单文本域高度？

针对你用React+pdf-lib开发PDF填充工具时遇到的文本溢出固定高度表单域的问题，可以通过提前计算文本所需高度，动态调整表单域Rect属性来解决，确保所有文本在打印时可见。

核心思路 #

1. 计算输入文本在当前表单域字体、字号下的实际所需高度（考虑自动换行）
2. 获取PDF模板中表单域的原始位置和尺寸
3. 若文本所需高度超过域的原始高度，调整域的Rect以扩展高度
4. 更新表单域值并导出PDF

实现代码 #

1. 浏览器端计算文本高度函数

利用Canvas模拟文本渲染，计算换行后的总高度：

// 计算文本在指定字体、字号、宽度下的总高度
function calculateTextHeight(text, fontSize, fontFamily, maxWidth) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontSize}px ${fontFamily}`;

  // 处理换行符，拆分单行文本（自动换行）
  const splitText = text.split('\n').flatMap(line => {
    let currentLine = '';
    const words = line.split(' ');
    const lines = [];
    for (const word of words) {
      const testLine = currentLine + (currentLine ? ' ' : '') + word;
      const testWidth = ctx.measureText(testLine).width;
      if (testWidth > maxWidth && currentLine) {
        lines.push(currentLine);
        currentLine = word;
      } else {
        currentLine = testLine;
      }
    }
    if (currentLine) lines.push(currentLine);
    return lines;
  });

  // 计算总高度（行高取字号的1.2倍，可根据字体调整）
  const lineHeight = fontSize * 1.2;
  return splitText.length * lineHeight;
}

2. 导出PDF时动态调整表单域高度

import { PDFDocument } from 'pdf-lib';

async function exportFilledPDF(templateUrl, formData) {
  // 加载PDF模板
  const templateBytes = await fetch(templateUrl).then(res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(templateBytes);
  const form = pdfDoc.getForm();

  // 遍历处理每个表单域
  for (const [fieldName, inputValue] of Object.entries(formData)) {
    const textField = form.getTextField(fieldName);
    if (!textField) continue;

    // 获取原始表单域的Rect（PDF坐标规则：[left, bottom, right, top]）
    const [left, bottom, right, top] = textField.getRect();
    const originalWidth = right - left;
    const originalHeight = top - bottom;

    // 获取当前字段的字体配置
    const fontSize = textField.getFontSize();
    const fontFamily = textField.getFontName();

    // 计算文本所需高度
    const requiredHeight = calculateTextHeight(inputValue, fontSize, fontFamily, originalWidth);

    // 若所需高度大于原始高度，调整表单域Rect
    if (requiredHeight > originalHeight) {
      // 向下扩展域（避免覆盖上方内容，若需向上扩展则调整top值）
      const heightDiff = requiredHeight - originalHeight;
      const newBottom = bottom - heightDiff;
      textField.setRect([left, newBottom, right, top]);
    }

    // 设置字段值并禁用滚动（确保所有内容可见）
    textField.setText(inputValue);
    textField.setScrollable(false);
  }

  // 生成并下载PDF
  const pdfBytes = await pdfDoc.save();
  const blob = new Blob([pdfBytes], { type: 'application/pdf' });
  const downloadUrl = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = 'filled-form.pdf';
  link.click();
  URL.revokeObjectURL(downloadUrl);
}

关键注意事项 #

• 字体一致性：Canvas计算时必须使用和PDF表单域完全一致的字体，否则高度计算会有偏差。若使用自定义字体，需先将字体加载到浏览器。
• 布局冲突：调整高度时要注意模板中下方是否有其他表单域，避免重叠。如果模板字段密集，建议按从下到上的顺序处理字段，防止调整后的域覆盖下方未处理的字段。
• 行高调整：代码中1.2的行高系数是通用值，可根据实际字体的行高特性微调，更精准的话可以通过Canvas的actualBoundingBoxAscent和actualBoundingBoxDescent计算单行真实高度。
• pdf-lib版本：确保使用v1.17.0及以上版本，旧版本的表单域API可能存在差异。

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