Some test text!


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 file system

Enable File Browser Option

If you wish to allow users to open files from their local file system, you can enable this feature with:

  .then(instance => {
    const { Feature } = instance.UI;

And this option will be available to users in the top-right of the WebViewer UI:

With a File Object

If you have the File object, from a file picker for example, you can pass the object directly to loadDocument function.

<label for="file_upload">Choose A file</label>
<input type="file" id="file_upload" name="file_upload" accept=".pdf">

<div id='viewer' style='width: 1024px; height: 600px;'></div>

  const input = document.getElementById('file_upload');

    .then(instance => {
      input.addEventListener('change', () => {

        // Get the file from the input
        const file = input.files[0];
        instance.UI.loadDocument(file, { filename: });

      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 you run into any issues loading a document, please visit our FAQ.

Get the answers you need: Support

Upcoming Webinar: Live tech update & run-through: Redaction | March 31st at 11 am PT


The Platform


© 2022 PDFTron Systems Inc. All rights reserved.


Terms of Use