Opening a document in WebViewer from URL

If you have a URL for a document, you can pass it either as a constructor option or to loadDocument to open it.

WebViewer({
  ...,
  initialDoc: 'https://myserver.com/myfile.pdf',
}, document.getElementById('viewer')).then(instance => {
    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      // perform document operations
    });
});

// or

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument('https://myserver.com/myfile.pdf', { filename: 'myfile.pdf' });

    const { documentViewer } = instance.Core;
    documentViewer.addEventListener('documentLoaded', () => {
      // perform document operations
    });
  });

See more WebViewer events such as documentLoaded to understand when to execute API operations.

If your document server requires additional options in HTTP request, you can use second argument in loadDocument function to pass them.

WebViewer(...)
  .then(instance => {
    instance.UI.loadDocument('https://myserver.com/myfile.pdf', {
      filename: 'myfile.pdf',
      customHeaders: {
        Authorization: 'Basic YWxhZGRpbjpvcGVuc2VzYW1l'
      },
      withCredentials: true
    });
  });

If you run into any issues loading a document, please visit our FAQ.