Some test text!

Discord Logo

Chat with us

PDFTron is now Apryse, learn more here.

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 IE11) and mobile devices without using plug-ins. Learn more about our JavaScript PDF Library.

Get Started Samples Download

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



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

    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',
).then(instance => {
  const preLoadFiles = ['../../../samples/files/demo.pdf', '../../../samples/files/simple-excel_2007.xlsx', '../../../samples/files/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');


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

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