How to load multiple documents in WebView from URL (PDFTron)

Question

I am trying to use PDFTron to load several documents and then open them dynamically onClick event. The trouble is I can't access the instance object from outside the return of the WebViewer promise - I need to create dynamic buttons that load a document depending on the button that I click. They are not going to be hardcoded so I can't load in documents from fixed URL's for each button.

Here is the example code from PDFTron. Mine is nearly identical - the only difference is I need the loadDocumentButtons to be dynamic. I don't know a way to do this due to scoping issues; the instance object is trapped within the return of the promise and I don't know how to access it from outside the promise return. Can anyone help with this?

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' });
    });
  });

score 1 · Answer 1 · answered Oct 12 '21 at 23:16

There are a couple of different approaches you could take. The first is to use a config file, which is basically a javascript file that gets executed in the context of the iframe in which WebViewer is run. Example:

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

Inside the config file you will have access to the Document, DocumentViewer and AnnotationManager objects (among others). Config Files

You can also call the getInstance API, which returns an existing instance of WebViewer.

import { getInstance } from '@pdftron/webviewer'

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

How to load multiple documents in WebView from URL (PDFTron)

1 Answers1