如何从 URL (PDFTron) 在 WebView 中加载多个文档答案

【问题标题】：How to load multiple documents in WebView from URL (PDFTron)如何从 URL (PDFTron) 在 WebView 中加载多个文档
【发布时间】：2021-10-12 13:25:07
【问题描述】：

我正在尝试使用 PDFTron 加载多个文档，然后在 onClick 事件中动态打开它们。问题是我无法从 WebViewer 承诺的返回之外访问实例对象 - 我需要创建动态按钮，根据我单击的按钮加载文档。它们不会被硬编码，因此我无法从每个按钮的固定 URL 加载文档。

这是来自 PDFTron 的示例代码。我的几乎相同 - 唯一的区别是我需要 loadDocumentButtons 是动态的。由于范围界定问题，我不知道如何做到这一点；实例对象被困在承诺的返回中，我不知道如何从承诺返回之外访问它。有人可以帮忙吗？

WebViewer({
  ...
}, viewerElement)
  .then(instance => {
    loadDocumentButton.on('click', () => {
      instance.loadDocument('mysite.com/myDocument.pdf', { documentId: 'id2' });
    });

    loadAnotherDocumentButton.on('click', () => {
      instance.loadDocument('mysite.com/myOtherDocument.pdf', { documentId: 'id2' });
    });
  });

【问题讨论】：

标签： javascript reactjs pdftron

【解决方案1】：

您可以采取几种不同的方法。第一种是使用配置文件，它基本上是一个在运行 WebViewer 的 iframe 的上下文中执行的 javascript 文件。示例：

WebViewer({
  initialDoc: "mydoc.pdf",
  config: "path/to/my/config/file.js" // relative to your HTML file
}, viewerElement);

在配置文件中，您将可以访问 Document、DocumentViewer 和 AnnotationManager 对象（以及其他对象）。 Config Files

您也可以调用getInstance API，它会返回一个现有的 WebViewer 实例。

import { getInstance } from '@pdftron/webviewer'

// After WebViewer has already been constructed
const instance = getInstance();

【讨论】：