PDFJS集成Web应用：带填写数据的PDF下载问题

你遇到的问题很典型：虽然PDF.js允许你编辑表单字段，但直接修改页面注解的fieldValue并调用getData()是拿不到带修改数据的PDF的——因为getData()默认返回的是原始文档的字节流，内存中的表单修改并没有被序列化回文档结构里。

为什么你的代码无效？ #

你修改了单个页面注解的fieldValue，但这个修改只停留在页面级的内存对象中，并没有同步到整个PDF文档的底层数据结构。PDF.js的pdf.getData()方法不会自动收集这些零散的修改，所以下载的还是原始PDF。

纯客户端解决方案：利用PDF.js的文档保存API #

PDF.js提供了PDFDocument.save()方法，它会将内存中所有的表单修改（包括字段值、外观更新）序列化回PDF字节流。下面是可行的实现代码：

async function downloadFilledPDF() {
  const pdfDoc = PDFViewerApplication.pdfDocument;
  const downloadManager = PDFViewerApplication.downloadManager;

  try {
    // 强制更新表单字段的外观（确保填写的内容在PDF中可见）
    await pdfDoc.save({ updateFieldAppearances: true });

    // 获取包含填写数据的PDF字节流
    const updatedPdfBytes = await pdfDoc.getData();
    const pdfBlob = PDFJS.createBlob(updatedPdfBytes, 'application/pdf');

    // 调用下载管理器完成下载
    downloadManager.download(pdfBlob, "filled-form.pdf", "filled-form.pdf");
  } catch (error) {
    console.error("下载带填写数据的PDF失败:", error);
  }
}

额外说明 #

• 表单字段的正确修改方式：建议通过PDF.js的表单API来修改字段值，而不是直接操作注解。比如：

  // 通过字段名设置值，会自动同步到文档状态
  PDFViewerApplication.getField("your-field-name").setValue("New Text");
  

• 版本兼容性：确保你使用的是较新版本的PDF.js（v2.0+ 基本都支持save()方法），旧版本可能需要用其他方式处理。
• 复杂表单的处理：如果你的表单包含签名、动态字段等复杂元素，可能需要额外处理，但常规的文本框、单选框、复选框都能被正确序列化。

这样修改后，你就能在客户端直接下载带有填写数据的PDF了，不需要依赖服务器端生成。

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