PDFTron full api 未在 WebViewer 中加载

Question

我正在尝试从 WEbViewer 获取完整的 api PDFTron。我按照下面 link 中的步骤操作。 https://www.pdftron.com/documentation/web/guides/full-api/setup/

但是我在加载 webviewer 时在控制台中收到下面给出的错误。

Uncaught (in promise) Error: Full version of PDFNetJS has not been loaded. Please pass the "fullAPI: true" option in your WebViewer constructor to use the PDFNet APIs.
    at Object.get (CoreControls.js:1694)
    at z.docViewer.on ((index):43)
    at CoreControls.js:398
    at Array.forEach (<anonymous>)
    at z.O (CoreControls.js:398)
    at CoreControls.js:213

这是我的代码。

         WebViewer({
        path: 'WebViewer-6.0.2/lib', // path to the PDFTron 'lib' folder on your server
        type: 'html5',
         initialDoc: 'forms/local.pdf',  // You can also use documents on your server
         fullAPI: true,
      }, document.getElementById('viewer'))
      .then(instance => {
        const docViewer = instance.docViewer;
        const annotManager = instance.annotManager;

    const Annotations = instance.Annotations;
    Annotations.ChoiceWidgetAnnotation.FORCE_SELECT=true;
    const Actions = instance.Actions;
      docViewer.on('documentLoaded', async () => {
      const  PDFNet = instance.PDFNet;
      await PDFNet.Initialize();
      // This part requires the full API: https://www.pdftron.com/documentation/web/guides/full-api/setup/
      alert('async');
      const doc = docViewer.getDocument();
      // Get document from worker
      const pdfDoc = await doc.getPDFDoc();
      pdfDoc.getAcroForm().putBool("NeedAppearances", true);
      });
    docViewer.on('documentLoaded', () => {
 docViewer.on('annotationsLoaded', () => {
      const annotations = annotManager.getAnnotationsList();
      annotations.forEach(annot => {
      console.log('fieldName => '+annot.fieldName);

});
    });

请帮我解决这个问题。

编辑

按照@Andy 的建议修改了代码。 index.html 文件中的更新代码如下所示，

    <!DOCTYPE html>
<html>
<head>
  <title>Basic WebViewer</title>
</head>

<!-- Import WebViewer as a script tag -->
<script src='WebViewer-6.0.2/lib/webviewer.min.js'></script>


<body>
  <div id='viewer' style='width: 1024px; height: 600px; margin: 0 auto;'>
  <script>
  WebViewer({
    path: 'WebViewer-6.0.2/lib', // path to the PDFTron 'lib' folder on your server
    type: 'html5',
     fullAPI: true,
     // licenseKey: 'Insert commercial license key here after purchase',
  }, document.getElementById('viewer'))
  .then(async instance => {
  const { Annotations, Tools, CoreControls, PDFNet, PartRetrievers, docViewer, annotManager } = instance;
    await PDFNet.Initialize();
        Annotations.ChoiceWidgetAnnotation.FORCE_SELECT=true;
    const Actions = instance.Actions;
      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 acroFrom = await pdfDoc.getAcroForm();
      acroform.putBool("NeedAppearances", true);
      });
    instance.loadDocument('forms/test.pdf');
  });
</script>
  </div>
</body>
</html>

我正在从项目文件夹中的 http 服务器加载文件。

 http-server -a localhost -p 7080

不幸的是，我遇到了同样的错误。

Error: Full version of PDFNetJS has not been loaded. Please pass the "fullAPI: true" option in your WebViewer constructor to use the PDFNet APIs.

我们目前正在评估 PDFTron，因此 WebViewer 构造函数中未传递 licenseKey 选项。

请帮我解决这个问题。

Answer 1

我已经尝试了您提供的代码，但仍然无法重现您遇到的问题。我通常在 WebViewer 事件之外执行初始化，因此初始化只发生一次：

WebViewer(...)
    .then(instance => {
        const { Annotations, Tools, CoreControls, PDFNet, PartRetrievers, docViewer } = instance;
        const annotManager = docViewer.getAnnotationManager();

        await PDFNet.initialize(); // Only needs to be initialized once

        docViewer.on('documentLoaded', ...);
        docViewer.on('annotationsLoaded', ...);
});

此外，我注意到每次触发 documentLoaded 时，您都会将一个事件处理程序附加到 annotationsLoaded。我不确定这是有意还是可取，但这会导致处理程序多次触发（切换文档时）。

这可能无关紧要，但您可以在初始化后尝试 instance.loadDocument，而不是使用 initialDoc。

await PDFNet.initialize();

docViewer.on('documentLoaded', ...);
docViewer.on('annotationsLoaded', ...);

instance.loadDocument('http://...');

关于完整 API，还有最后一件事要提。大多数时候 API 会 return 作为结果，所以你必须 await 大多数时候的 return 值。

const acroFrom = await pdfDoc.getAcroForm();
// You can await this too. Especially if you need a reference to the new bool object that was
acroform.putBool("NeedAppearances", true);

如果有帮助请告诉我！

PDFTron full api 未在 WebViewer 中加载

PDFTron full api is not getting loaded in WebViewer

pdf

pdf-form

pdftron