如何使用pdf.js库填充XFA PDF表单并导出？

问题概述 #

已通过pdf.js成功打开并读取XFA格式的PDF表单，但无法实现字段填充、修改后PDF的保存及下载操作，原代码尝试使用annotationStorage修改字段值无效。

原代码核心问题 #

XFA表单的结构与普通AcroForms完全不同，不能通过annotationStorage来修改字段值，必须直接操作XFA的XML数据结构；同时原代码中saveDocument()和getData()的调用方式不适用于XFA文档的修改保存。

可行实现示例 #

async function fillAndDownloadXfaPdf(source) {
  // 初始化PDF文档，启用XFA支持
  const pdfDocument = await pdfjs.getDocument({
    ...source,
    enableXfa: true,
  }).promise;

  if (!pdfDocument.xfa) {
    console.error("文档不是XFA表单");
    return;
  }

  // 1. 获取原始XFA XML内容
  const xfaXmlString = await pdfDocument.getXfaXml();
  const parser = new DOMParser();
  const xfaDoc = parser.parseFromString(xfaXmlString, "application/xml");

  // 2. 修改XFA表单字段值（需替换为实际字段对应的XML节点路径）
  // 示例：修改FamilyName和GivenName字段
  const familyNameNode = xfaDoc.querySelector('[name="FamilyName23412"]');
  const givenNameNode = xfaDoc.querySelector('[name="GivenName23413"]');
  
  if (familyNameNode) {
    familyNameNode.textContent = "Test Surname";
  }
  if (givenNameNode) {
    givenNameNode.textContent = "TestName";
  }

  // 3. 将修改后的XML转换回字符串
  const serializer = new XMLSerializer();
  const modifiedXfaXml = serializer.serializeToString(xfaDoc);

  // 4. 更新PDF文档中的XFA数据
  await pdfDocument.setXfaXml(modifiedXfaXml);

  // 5. 生成修改后的PDF Blob并触发下载
  const pdfBytes = await pdfDocument.saveDocument();
  const pdfBlob = new Blob([pdfBytes], { type: "application/pdf" });
  const pdfUrl = URL.createObjectURL(pdfBlob);

  const downloadLink = document.createElement("a");
  downloadLink.href = pdfUrl;
  downloadLink.download = "filled-xfa-form.pdf";
  downloadLink.style.display = "none";
  document.body.appendChild(downloadLink);
  downloadLink.click();

  URL.revokeObjectURL(pdfUrl);
  document.body.removeChild(downloadLink);
}

关键注意事项 #

• 版本要求：确保使用的pdf.js版本为v3.0及以上，旧版本对XFA的修改支持不完善
• 字段节点定位：实际开发中需要先打印xfaXmlString查看XFA的XML结构，确认字段对应的节点选择器（可能需要结合层级路径）
• 命名空间处理：如果XFA XML包含命名空间，需要使用带有命名空间的查询方式，例如：

  const nsResolver = xfaDoc.createNSResolver(xfaDoc.documentElement);
  const familyNameNode = xfaDoc.evaluate('//xfa:field[@name="FamilyName23412"]', xfaDoc, nsResolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  

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