Javascript 使用 PDFTron WebViewer FormBuilder 创建的表单字段的触发操作 UI

Question

我目前正在评估 WebViewer 5.2.8 版。我需要设置一些 javascript function/code 作为触发器的操作，例如通过 WebViewer UI 计算触发器、格式化触发器和击键触发器。请帮助我如何在 WebViewer UI.

中为表单字段触发器配置 javascript 代码

提前致谢，

赛义德

Answer 1

抱歉回复晚了！

您必须自己创建 UI 组件，这些组件将包含 JavaScript 代码。您可以仅使用 HTML 和 JavaScript 来执行类似于 FormBuilder 演示所做的操作。但是，最好克隆 open source UI 并添加您自己的组件。

至于设置操作，我建议您尝试使用 6.0 版，因为该版本对小部件和表单字段有更好的支持。但是，我们正在调查字段操作的错误，该错误会在下载文档时引发错误。您应该能够使用此代码使其首先运行：

    docViewer.on('annotationsLoaded', () => {
      const annotations = annotManager.getAnnotationsList();
      annotations.forEach(annot => {
        const action = new instance.Actions.JavaScript({ javascript: 'alert("Hello World!")' });
        // C cor Calculate, and F for Format
        annot.addAction('K', action);
      });
    });

错误解决后，您应该可以正确下载文档。

否则，您将不得不使用完整的 API，这可能不太理想。完整的 API 会有点复杂，如果上述功能很快就会得到修复，我不会推荐它。

让我知道这是否有帮助，或者您是否需要有关使用完整 API 来完成此操作的更多信息！

编辑

这是完整的 API 代码！由于完整的 API 在低级别上工作并且非常接近 PDF 规范，因此要使其工作确实需要更多的时间。您仍然需要使用我之前提供的代码更新注释，我将再次包含它。


    docViewer.on('documentLoaded', async () => {
      // This part requires the full API: https://www.pdftron.com/documentation/web/guides/full-api/setup/
      const doc = docViewer.getDocument();
      // Get document from worker
      const pdfDoc = await doc.getPDFDoc();

      const pageItr = await pdfDoc.getPageIterator();

      while (await pageItr.hasNext()) {
        const page = await pageItr.current();
        // Note: this is a PDF array, not a JS array
        const annots = await page.getAnnots();
        const numAnnots = await page.getNumAnnots();

        for (let i = 0; i < numAnnots; i++) {
          const annot = await annots.getAt(i);

          const subtypeDict = await annot.findObj('Subtype');
          const subtype = await subtypeDict.getName();

          const actions = await annot.findObj('AA');

          // Check to make sure the annot is of type Widget
          if (subtype === 'Widget') {
            // Create the additional actions dictionary if it does not exist
            if (!actions) {
              actions = await annot.putDict('AA');
            }

            let calculate = await actions.findObj('C');

            // Create the calculate action (C) if it does not exist
            if (!calculate) {
              calculate = await actions.putDict('C');
              await Promise.all([calculate.putName('S', 'JavaScript'), calculate.putString('JS', 'app.alert("Hello World!")')]);
            }

            // Repeat for keystroke (K) and format (F)
          }
        }

        pageItr.next();
      }
    });

    docViewer.on('annotationsLoaded', () => {
      const annotations = annotManager.getAnnotationsList();
      annotations.forEach(annot => {
        const action = new instance.Actions.JavaScript({ javascript: 'app.alert("Hello World!")' });
        // K for Keystroke, and F for Format
        annot.addAction('C', action);
      });
    });

您或许可以在 documentLoaded 事件下将它们放在一起，但是一旦修复准备就绪，您可以使用完整的 API.[=13= 删除该部分]

Javascript 使用 PDFTron WebViewer FormBuilder 创建的表单字段的触发操作 UI

Javascript trigger action for form fields created using PDFTron WebViewer FormBuilder UI

pdftron