Some test text!

Adding Basic Functionality

In this document
chevron_rightOpen a local file
chevron_rightNavigate the document
chevron_rightNext Steps

To get you introduced to Webviewer, lets try using some of our most common APIs.

linkOpen a local file

We can add a button that allows a user to open a local PDF. All we need to do is add a file input to our HTML, and tell Webviewer to open the file when it's selected.

Adding onto the code from the initialization step:

<!-- 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>
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({ ... }, viewerElement);

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

  // we need to wait for Webviewer to be ready before we can use its APIs
  viewerElement.addEventListener('ready', function() {
    // get an instance of the viewer
    var viewerInstance = myWebViewer.getInstance();

    // Once the viewer is ready, we can add a listener to our file input.
    // This will be triggered when the user selects a file
    input.addEventListener('change', function() {
      // Get the file from the input
      var file = input.files[0]; 

       // Tell webviewer to load the document
      viewerInstance.loadDocument(file, { filename: file.name })
    });
  });
</script>

linkNavigate the document

We can programmatically navigate around documents using APIs. A use case for this would be navigating based on query parameters.

Adding onto the code from the initialization step:

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

<script>
  var viewerElement = document.getElementById('viewer');
  var myWebViewer = new PDFTron.WebViewer({ ... }, viewerElement);

  // we need to wait for the document to be loaded before we can use these APIs
  viewerElement.addEventListener('documentLoaded', function() {
    // get an instance of the viewer
    var viewerInstance = myWebViewer.getInstance();

    // Get our query params using the built in URLSearchParams class
    var urlParams = new URLSearchParams(window.location.search);
    var pageNumber = urlParams.get('page') || 1; // default to page 1
    var zoomLevel = urlParams.get('zoom') || '100'; // default to 100%

    // set the page and zoom level
    viewerInstance.setCurrentPageNumber(pageNumber);
    viewerInstance.setZoomLevel(zoomLevel + '%');
  });
</script>

Now when you navigate to http://localhost:3000/?page=2&zoom=250, you should see the document zoomed in and on page 2.

linkNext Steps