Some test text!

menu

Preloading PDFs in JavaScript Viewer

Preload PDFs, MS Office documents, images and more in a PDF viewer using this JavaScript sample (no servers or other external dependencies required). Preloading documents in a PDF Viewer gives users near instantaneous access to large and complex documents – helping improve their overall user experience in your application. This sample works on all browsers (including IE10) and mobile devices without using plug-ins. Learn more about our JavaScript PDF Library.

Get StartedSamplesDownload

To run this sample, get started with a free trial of PDFTron SDK.

JavaScript

HTML

const viewerElement = document.getElementById('viewer');

WebViewer(
  {
    path: '../../../lib',
    // in this example we are using 'all' to preload resources for office files
    // when working with only pdf, set to 'pdf' to avoid downloading unneeded resources
    preloadWorker: 'all',
  },
  viewerElement
).then(instance => {
  samplesSetup(instance);
  const preLoadFiles = ['../../../samples/files/demo.pdf', '../../../samples/full-apis/TestFiles/simple-excel_2007.xlsx', '../../../samples/full-apis/TestFiles/simple-word_2007.docx'];

  const documentsDiv = document.getElementById('documents');

  preLoadFiles.forEach(file => {
    const div = document.createElement('div');
    div.innerHTML = file.split('/').slice(-1)[0];

    const button = document.createElement('button');
    button.innerHTML = 'Loading';

    const list = document.createElement('li');
    list.appendChild(div);
    list.appendChild(button);

    documentsDiv.appendChild(list);

    // using this instead of 'fetch' for IE11 support
    const xhr = new XMLHttpRequest();
    xhr.open('GET', file, true);
    xhr.responseType = 'blob';
    xhr.onload = function() {
      const doc = this.response;
      if (this.status === 200) {
        button.onclick = () => {
          viewerElement.style.visibility = 'visible';
          // file name is required for office files, 'loadDocument' will assume files are pdf if there isn't a filename
          instance.loadDocument(doc, { filename: file.split('/').slice(-1)[0] });
        };
        button.innerHTML = 'Open';
      }
    };
    xhr.send();
  });

  document.getElementById('toggle').addEventListener('click', () => {
    if (viewerElement.style.visibility === 'hidden') {
      viewerElement.style.visibility = 'visible';
    } else {
      viewerElement.style.visibility = 'hidden';
    }
  });
});
close

Free Trial

Get unlimited trial usage of PDFTron SDK to bring accurate, reliable, and fast document processing capabilities to any application or workflow.

Select a platform to get started with your free trial.

Unlimited usage. No email address required.

Join our live demo to learn about use cases & capabilities for WebViewer

Learn more
close