Viewing with WebViewer Server

Shows how to call WebViewer constructor to instantiate and load document using WebViewer with WebViewer Server. You can upload local files or load files that are publicly accessible.

JavaScript

//
// Requires starting WebViewer Server in order to run
// eslint-disable-next-line no-undef
const WebViewerConstructor = isWebComponent() ? WebViewer.WebComponent : WebViewer;

const startWebViewer = () => {
  WebViewerConstructor(
    {
      path: '../../../lib',
      webviewerServerURL: hostname,
      initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
    },
    document.getElementById('viewer')
  ).then(instance => {
    samplesSetup(instance);
    document.getElementById('select').onchange = e => {
      instance.UI.loadDocument(e.target.value);
    };

    document.getElementById('file-picker').onchange = e => {
      const file = e.target.files[0];
      if (file) {
        instance.UI.loadDocument(file);
      }
    };

    document.getElementById('url-form').onsubmit = e => {
      e.preventDefault();
      instance.UI.loadDocument(document.getElementById('url').value);
    };
  });
};

let hostname = 'http://localhost:8090/';
if (window.location.hostname.includes('apryse.com')) {
  hostname = 'https://demo.apryse.com/';
}

const healthFunc = () => {
  if (this.status >= 500) {
    alert(`WebViewer Server at ${hostname} failing health checks, cannot connect...`); // eslint-disable-line no-alert
  } else if (this.status === 404) {
    alert(`WebViewer Server cannot be found at ${hostname}, please run \`npm run webviewer-server\``); // eslint-disable-line no-alert
  } else if (this.status >= 400) {
    alert(`WebViewer Server cannot be reached at ${hostname}`); // eslint-disable-line no-alert
  } else {
    startWebViewer();
  }
};

// Health check to ensure server is running
const healthCheck = new XMLHttpRequest();
healthCheck.onreadystatechange = () => {
  if (healthCheck.readyState === 4 && healthCheck.status === 0) {
    alert(`WebViewer Server at ${hostname} cannot be found, please run \`npm run webviewer-server\` in the WebViewer repository...`); // eslint-disable-line no-alert
  }
};

healthCheck.addEventListener('load', healthFunc);
healthCheck.open('GET', `${hostname}blackbox/health`);
healthCheck.send();