Some test text!

Search
Hamburger Icon

Viewing a Document 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.

Get Started Samples Download

To run this sample, get started with a free trial of Apryse SDK.

JavaScript

HTML

//
// Requires starting WebViewer Server in order to run

const startWebViewer = () => {
  WebViewer(
    {
      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();