Some test text!

Loading...
Guides

Customize PDF Viewer UI & toolbar with JavaScript

This JavaScript sample shows you how to customize the UI, toolbar and menus of our PDF Viewer using APIs. You can create a simplified UI to match your user’s experience levels or their task requirements by modifying header, enabling/disabling feature sets or hiding individual annotation icons. You can also import your own colors into WebViewer and embed custom icons into the toolbar to match your look and feel. This sample works on all browsers (including IE11) and mobile devices without using plug-ins. For an example visit our WebViewer Custom UI demo. For more detailed information on configuring UI please see visit our WebViewer UI guide. Learn more about our JavaScript PDF Library.

Get Started Samples Download

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

JavaScript

HTML

WebViewer(
  {
    path: '../../../lib',
    webviewerServerURL: 'https://demo.pdftron.com/', // comment this out to do client-side only
    initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  },
  document.getElementById('viewer')
).then(instance => {
  samplesSetup(instance);
  const { setHeaderItems, enableElements, disableElements, enableFeatures, disableFeatures, setTheme, Feature, Theme } = instance.UI;

  const findFirstDividerIndex = items => {
    for (let i = 0; i < items.length; ++i) {
      if (items[i].type === 'divider') {
        return i;
      }
    }
  };

  const reverseHeaderItems = () => {
    // Change header items
    setHeaderItems(header => {
      const items = header.getItems();
      // reverse all items after first divider
      const indexAfterFirstDivider = findFirstDividerIndex(items) + 1;
      // could use findIndex if you don't need to support IE
      // const indexAfterFirstDivider = items.findIndex(item => item.type === 'divider') + 1;
      const itemsToReverse = items.slice(indexAfterFirstDivider);
      itemsToReverse.reverse();

      header.update([].concat(items.slice(0, indexAfterFirstDivider), itemsToReverse));
    });
  };

  const toggleElement = (e, dataElement) => {
    // Enable/disable individual element
    if (e.target.checked) {
      enableElements([dataElement]);
    } else {
      disableElements([dataElement]);
    }
  };

  if (NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }

  if (HTMLCollection && !HTMLCollection.prototype.forEach) {
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
  }

  document.getElementsByName('header').forEach(radioInput => {
    radioInput.onchange = () => {
      reverseHeaderItems();
    };
  });

  document.getElementById('ribbons').onchange = e => {
    // Enable/disable ribbons
    if (e.target.checked) {
      enableFeatures([Feature.Ribbons]);
    } else {
      disableFeatures([Feature.Ribbons]);
    }
  };

  document.getElementById('text-selection').onchange = e => {
    // Enable/disable text selection
    if (e.target.checked) {
      enableFeatures([Feature.TextSelection]);
    } else {
      disableFeatures([Feature.TextSelection]);
    }
  };

  document.getElementById('annotations').onchange = e => {
    // Enable/disable annotations
    if (e.target.checked) {
      enableFeatures([Feature.Annotations]);
    } else {
      disableFeatures([Feature.Annotations]);
    }
  };

  document.getElementById('notes-panel').onchange = e => {
    // Enable/disable notes panel
    if (e.target.checked) {
      enableFeatures([Feature.NotesPanel]);
    } else {
      disableFeatures([Feature.NotesPanel]);
    }
  };

  document.getElementById('file-picker').onchange = e => {
    // Enable/disable file picker
    if (e.target.checked) {
      enableFeatures([Feature.FilePicker]);
    } else {
      disableFeatures([Feature.FilePicker]);
    }
  };

  document.getElementById('print').onchange = e => {
    // Enable/disable print
    if (e.target.checked) {
      enableFeatures([Feature.Print]);
    } else {
      disableFeatures([Feature.Print]);
    }
  };

  document.getElementById('download').onchange = e => {
    // Enable/disable download
    if (e.target.checked) {
      enableFeatures([Feature.Download]);
    } else {
      disableFeatures([Feature.Download]);
    }
  };

  document.getElementById('view-controls').onchange = e => {
    toggleElement(e, 'viewControlsButton');
  };

  document.getElementById('search').onchange = e => {
    toggleElement(e, 'searchButton');
  };

  document.getElementById('pan-tool').onchange = e => {
    toggleElement(e, 'panToolButton');
  };

  document.getElementById('page-nav').onchange = e => {
    toggleElement(e, 'pageNavOverlay');
  };

  document.getElementById('default').onchange = e => {
    if (e.target.checked) {
      reverseHeaderItems();
    }
  };

  document.getElementById('reverse').onchange = e => {
    if (e.target.checked) {
      reverseHeaderItems();
    }
  };

  document.getElementsByName('theme').forEach(radioInput => {
    radioInput.onchange = e => {
      if (e.target.id === 'light' && e.target.checked) {
        setTheme(Theme.LIGHT);
      } else {
        setTheme(Theme.DARK);
      }
    };
  });
});

Upcoming Webinar: PDFTron SDK Tech Review | Nov 29, 2022 at 2 pm ET

PDFTron SDK

The Platform

NEW

© 2022 PDFTron Systems Inc. All rights reserved.

Privacy

Terms of Use