如何在React应用中填充PDF表单并导出扁平化PDF文件？

我之前做过类似的需求，用pdf-lib这个库就能完美搞定——它支持加载PDF模板、填充表单字段，还能直接做扁平化处理，完全符合你的需求。下面是结合React的具体实现步骤和代码：

1. 准备工作：安装依赖 #

首先安装pdf-lib，它是处理PDF操作的核心库：

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

另外，你需要提前准备好带有表单字段的PDF模板（可以用Adobe Acrobat或其他PDF编辑工具创建，给每个需要填充的字段设置唯一ID，比如name、userEmail），把模板放在React项目的public文件夹里。

2. 组件实现：从收集数据到导出PDF #

下面是一个完整的React组件示例，包含表单收集数据和导出功能：

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

export default function PDFGenerator() {
  // 受控表单状态，收集用户数据
  const [formData, setFormData] = useState({
    name: '',
    email: ''
  });

  // 处理表单输入变化
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 核心：填充PDF模板并生成扁平化PDF
  const generateAndDownloadPDF = async () => {
    try {
      // 步骤1：从public文件夹获取PDF模板
      const templateResponse = await fetch('/pdf-template.pdf');
      const templateArrayBuffer = await templateResponse.arrayBuffer();

      // 步骤2：加载PDF模板
      const pdfDoc = await PDFDocument.load(templateArrayBuffer);
      const form = pdfDoc.getForm();

      // 步骤3：根据字段ID填充对应内容
      form.getTextField('name').setText(formData.name);
      form.getTextField('email').setText(formData.email);

      // 步骤4：扁平化PDF——把表单字段转为静态内容，移除交互性
      form.flatten();

      // 步骤5：生成PDF文件并触发下载
      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'filled-document.pdf';
      link.click();
      URL.revokeObjectURL(url);
    } catch (error) {
      console.error('生成PDF失败:', error);
      alert('生成PDF时出错，请稍后重试');
    }
  };

  return (
    <div className="pdf-generator">
      <h2>填写信息生成PDF</h2>
      <div className="form-group">
        <label>姓名：</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          placeholder="请输入姓名"
          required
        />
      </div>
      <div className="form-group">
        <label>邮箱：</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleInputChange}
          placeholder="请输入邮箱"
          required
        />
      </div>
      <button 
        onClick={generateAndDownloadPDF}
        disabled={!formData.name || !formData.email}
      >
        生成并下载PDF
      </button>
    </div>
  );
}

关键细节说明 #

• 模板字段ID匹配：确保你在PDF模板里设置的字段ID和代码中getTextField的参数完全一致，否则无法填充内容。
• 扁平化处理：form.flatten()方法会把所有表单字段转换成静态文本，这样用户下载后的PDF就不能再编辑，完全符合你要的"扁平化"需求。
• 错误处理：代码里加了try-catch捕获异常，避免因为模板加载失败、字段不存在等问题导致应用崩溃。

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