Question

我需要解析具有许多Acroform字段的PDF文件，并提取每个字段的字段名称（PDF标记中的/ T）和值（PDF标记中的/ V）。我想在JavaScript中进行此客户端操作，但是找不到正在执行此操作的现有示例或库。有人对如何使用它有任何建议吗？

编辑：出于性能原因，我想在客户端进行此操作。我将从PDF中获取字段值并将其保存到数据库中。但是对于某些字段，在保存之前，我将需要提示其他输入。我想在客户端上全部执行此操作，然后将值发送到服务器进行保存，而不是将PDF上载到服务器，在服务器上解析它，将需要额外输入的字段发送回客户端，然后发送这些结果以保存。

Answer 1

我工作的公司有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

Answer 2

事实证明，从PDF中解析出我需要的内容并不那么困难，而一个库可能会显得过大。这是我正在使用的代码：

function importPdf(event) {
  const reader = new FileReader();
  reader.onload = function () {
    const matches = reader.result.match(/((obj)[\s\S]*?(endobj))/g);
    matches.forEach(match => {
      const tIndex = match.indexOf('/T (');
      const vIndex = match.indexOf('/V (');
      if(tIndex > -1 && vIndex > -1) {
        const fieldNameSegment = match.substring(tIndex + 4);
        const fieldNameValue = fieldNameSegment.substring(0,fieldNameSegment.indexOf(')'));
        const valueSegment = match.substring(vIndex + 4);
        const dataValue = valueSegment.substring(0, valueSegment.indexOf(')'));
        console.log(fieldNameValue, dataValue);
      }
    });
  }
  reader.readAsText(event.target.files[0]);
}

<input type="file" id="file-input" onchange="importPdf(event)">

在JavaScript中读取PDF Acroform字段的值

2 个答案: