React.js应用如何将用户数据填充至Form 11 PDF并支持下载？

核心思路 #

借助pdf-lib库加载现有的Form 11可编辑PDF模板，将收集到的用户数据填充至对应字段，生成新PDF后提供下载功能。

步骤实现 #

1. 安装依赖 #

先安装处理PDF表单的核心库：

npm install pdf-lib
# 或使用yarn
yarn add pdf-lib

2. 准备PDF模板 #

确保你的Form 11是可编辑的表单PDF（非纯图片PDF），通过Adobe Acrobat或其他PDF工具确认每个待填充字段的名称（比如姓名对应字段名full_name、年龄对应age、邮箱对应email），字段名需与代码中的变量一一匹配。

3. 编写填充与下载逻辑 #

假设你已通过useState维护了name、age、email三个用户数据变量，直接在组件中添加如下代码：

import { useState } from 'react';
import { PDFDocument } from 'pdf-lib';

export default function UserForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');
  const [email, setEmail] = useState('');

  const handleFillAndDownloadPDF = async () => {
    try {
      // 加载public目录下的PDF模板
      const templateUrl = '/form11-template.pdf';
      const templateBytes = await fetch(templateUrl).then(res => res.arrayBuffer());

      // 创建PDF文档实例
      const pdfDoc = await PDFDocument.load(templateBytes);
      const form = pdfDoc.getForm();

      // 填充对应字段（字段名必须与PDF模板完全一致）
      form.getTextField('full_name').setText(name);
      form.getTextField('age').setText(age.toString());
      form.getTextField('email').setText(email);

      // 可选：锁定表单，将填充内容转为静态文本
      form.flatten();

      // 生成填充后的PDF字节数据
      const pdfBytes = await pdfDoc.save();

      // 创建下载链接并触发下载
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `form11-filled-${name}.pdf`;
      a.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('填充PDF失败:', error);
      alert('填充PDF时出错，请检查模板是否正确');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="姓名"
      />
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(e.target.value)}
        placeholder="年龄"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="邮箱"
      />
      <button onClick={handleFillAndDownloadPDF}>下载填充后的Form 11</button>
    </div>
  );
}

4. 关键注意事项 #

• 字段名匹配：代码中使用的字段名必须与PDF模板里的表单字段名称完全一致（大小写敏感），可通过console.log(form.getFields())打印所有字段信息进行核对。
• 模板路径：若模板放在项目public目录下，直接使用相对路径；若为远程模板，需确保目标服务器配置了CORS允许访问。
• 错误处理：通过try-catch捕获加载PDF、填充字段时的异常，给用户提供清晰的错误提示。
• 表单扁平化：form.flatten()会将填充后的字段转为静态文本，防止后续编辑，无需此功能可删除该行代码。

替代方案 #

若pdf-lib不符合需求，可尝试react-pdf库，但它更侧重生成全新PDF而非编辑现有表单模板，因此优先推荐pdf-lib。

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