时间戳

首页 > 解决方案 > 在 JavaScript 中读取 PDF Acroform 字段的值

javascript - 在 JavaScript 中读取 PDF Acroform 字段的值

问题描述

我需要解析一个包含很多 Acroform 字段的 PDF 文件，并为每个字段提取字段名称（PDF 标记中的 /T）和值（PDF 标记中的 /V）。我想在 JavaScript 中做这个客户端，但我没有找到似乎可以做到这一点的现有示例或库。有人对如何处理它有任何建议吗？

编辑：出于性能原因，我想做这个客户端。我将从 PDF 中获取字段值并将它们保存到数据库中。但是对于某些字段，我需要在保存之前提示输入其他内容。我想在客户端上完成所有这些，然后将值发送到服务器进行保存，而不是将 PDF 上传到服务器，在服务器上解析它，将需要额外输入的字段发送回客户端，然后发送要保存的结果。

标签： javascriptpdf

解决方案

我工作的公司有PDFTron WebViewer SDK，您可以阅读所有表单字段，读取/编辑值，浏览器中的所有客户端，您还可以允许用户查看整个 PDF 并手动填写任何字段.

示例：https ://www.pdftron.com/webviewer/demo/pdf-forms

我需要解析一个包含很多 Acroform 字段的 PDF 文件，并为每个字段提取字段名称（PDF 标记中的 /T）和值（PDF 标记中的 /V）。

您可以在上面链接的 pdf-forms 示例中看到实时代码，但下面的代码将迭代所有字段并将值（如果有）打印到控制台。

viewerElement.addEventListener('ready', function() {
  var viewerInstance = viewer.getInstance();

  const docViewer = viewerInstance.docViewer;
  const annotManager = docViewer.getAnnotationManager();
  const fieldManager = annotManager.getFieldManager();

  const checkField = (field) => {
    // Do something with data
    const { name, value } = field;
    console.log(name + ' ' + value);
    // Check children fields
    field.children.forEach(checkField);
  }

  docViewer.on('annotationsLoaded', function() {
    fieldManager.forEachField(checkField);
  });
});

我将从 PDF 中获取字段值并将它们保存到数据库中。

如果您只需要字段值，您可以从 WebViewer 轻松获取 PDF ISO XFDF XML 格式，您可以使用任何支持 XFDF 的 PDF SDK 将其发送到您的服务器并合并到 PDF。这样，您可以避免来回传输整个 PDF，而只需将更小的表单字段值作为 XML 发送。

var xmlXfdfFieldData = annotManager.exportAnnotations({fields:true, widgets:false, links:false});

对于某些字段，我需要在保存前提示额外输入。

WebViewer UI/UX 是完全可定制的，因此您可以交互/提示用户更新哪些字段。

下面的示例显示了如何更改表单字段的颜色和不透明度，这将是您可以用来应用自己的业务逻辑的起点。

https://www.pdftron.com/documentation/web/guides/form-samples#customizing-form-fields

推荐阅读