如何通过react-pdf获取填写后的PDF缓冲区并存储？

要实现导出包含用户填写内容的PDF，需要结合react-pdf的表单数据读取能力和pdf-lib库的PDF编辑能力，具体实现如下：

1. 安装依赖 #

首先安装pdf-lib，用于修改PDF并填充表单数据：

npm install pdf-lib

2. 完整代码实现 #

import { useRef } from 'react';
import { Document, Page } from '@react-pdf/renderer';
import { PDFDocument, PDFTextField, PDFCheckBox } from 'pdf-lib';

const PDFFormRenderer = () => {
  const documentRef = useRef(null);
  const pdfUrl = "你的PDF文件地址"; // 替换为实际的PDF URL

  const handleSave = async () => {
    // 获取react-pdf中的PDF文档实例
    const pdfDocument = documentRef.current?.pdfDocument;
    if (!pdfDocument) return;

    // 收集所有表单字段的填写值
    const formFieldValues = {};
    const fieldNames = pdfDocument.getFieldNames();
    fieldNames.forEach(fieldName => {
      const field = pdfDocument.getField(fieldName);
      formFieldValues[fieldName] = field.value;
    });

    // 加载原始PDF文件的二进制数据
    const originalPdfRes = await fetch(pdfUrl);
    const originalPdfBytes = await originalPdfRes.arrayBuffer();

    // 使用pdf-lib加载PDF并填充表单数据
    const editablePdf = await PDFDocument.load(originalPdfBytes);
    const form = editablePdf.getForm();

    // 遍历字段，根据类型设置对应的值
    Object.entries(formFieldValues).forEach(([fieldName, value]) => {
      const field = form.getField(fieldName);
      if (!field) return;

      if (field instanceof PDFTextField) {
        field.setText(value);
      } else if (field instanceof PDFCheckBox) {
        field.setValue(value);
      }
      // 可扩展处理单选框、下拉框等其他表单类型
    });

    // 生成更新后的PDF缓冲区（ArrayBuffer）
    const updatedPdfBuffer = await editablePdf.save({ useObjectStreams: false });

    // 将缓冲区转为Blob，通过FormData发送到服务器
    const formData = new FormData();
    formData.append('filledPdf', new Blob([updatedPdfBuffer], { type: 'application/pdf' }), 'filled-form.pdf');

    // 发送请求到服务器存储PDF
    try {
      await fetch('/api/save-filled-pdf', {
        method: 'POST',
        body: formData,
      });
      alert('PDF保存成功');
    } catch (err) {
      console.error('保存PDF失败:', err);
      alert('PDF保存失败');
    }
  };

  return (
    <>
      <Document
        inputRef={documentRef}
        file={pdfUrl}
        error={() => alert('PDF加载失败')}
        onLoadSuccess={() => console.log('PDF加载完成')}
      >
        <Page
          renderTextLayer={true}
          renderAnnotationLayer={true}
          customTextRenderer={false}
          pageNumber={1}
          renderForms={true}
        />
      </Document>
      <button onClick={handleSave}>保存填写后的PDF</button>
    </>
  );
};

export default PDFFormRenderer;

关键说明 #

• 获取表单数据：通过documentRef.current.pdfDocument拿到react-pdf的PDF实例，调用getFieldNames()和getField()方法收集用户填写的所有表单值。
• 修改PDF：pdf-lib负责加载原始PDF并填充表单数据，需要根据字段类型（文本框、复选框等）调用对应的设置方法。
• 生成缓冲区：editablePdf.save()返回的updatedPdfBuffer就是包含填写内容的PDF二进制缓冲区，可直接用于发送到服务器。
• 服务器交互：将缓冲区转为Blob后，通过FormData格式发送到后端接口，后端即可接收并存储为PDF文件。

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