Some test text!

Loading...
Guides
Open a document

Open a document

There are a few ways to open a document such as from a URL, a blob, the filesystem, or base64 data. Additionally, there are loading options to help WebViewer determine the type of the file being loaded.

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.

Additional options

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.

Get the answers you need: Support

UPCOMING WEBINAR: "2021 in review: Top five new & updated features" Dec 9th @ 11am PT