Get Started

play_arrow

Learn more

play_arrow

Common use cases

play_arrow

Open a document

play_arrow

Save a document

play_arrow

Viewer

play_arrow

UI Customization

play_arrow

Annotations

play_arrow

Collaboration

play_arrow

Forms

play_arrow

Signature

play_arrow

Searching

play_arrow

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Migration Guides

play_arrow

Open a document from file system

The following features are available in:

check

PDF.js Express Viewer

help_outline

PDF.js Express Viewer is a free viewer that has limited capabilities compared to PDF.js Express Pro

check

PDF.js Express Plus

help_outline

PDF.js Express Plus is a paid product that supports annotating, signing, form filling and more

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

<!-- add our input and a label -->
<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>

<script>
  const input = document.getElementById('file_upload');

  WebViewer(...)
    .then(instance => {
      input.addEventListener('change', () => {
        // Get the file from the input
        const file = input.files[0];
        instance.loadDocument(file, { filename: file.name });
      });

      const { docViewer } = instance;
      docViewer.on('documentLoaded', () => {
        // perform document operations
      });
    });
</script>
<!-- add our input and a label -->
<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>

<script>
  const input = document.getElementById('file_upload');

  WebViewer(...)
    .then(instance => {
      input.addEventListener('change', () => {
        // Get the file from the input
        const file = input.files[0];
        instance.UI.loadDocument(file, { filename: file.name });
      });

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