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

Measurement

play_arrow

PDF.js Express REST API

play_arrow

Hide & disable buttons in viewer

Hiding DOM elements is an essential aspect of a customizable UI. PDF.js Express Web Viewer UI supports hiding/showing elements both initially and dynamically.

Find data-element attribute values

To hide/show the DOM elements, first you must find the data-element attribute on the elements from a DOM inspector. For example, if we inspect the left panel,

Left panel data element

we can find that it has a data-element value of leftPanel. Now we can use that value to hide/show it.

Constructor option

To hide the DOM elements even before the initial render, you can use a constructor option disabledElements to pass a list of data-element values that should be hidden.

Example

WebViewer({
  licenseKey: 'YOUR_LICENSE_KEY',
  path: 'lib',
  disabledElements: [
    'viewControlsButton',
    'viewControlsOverlay'
  ]
}, document.getElementById('viewer'));

Relevant APIs

To hide/show the DOM elements on the fly, you can use the following APIs:

Note that these are different from opening/closing elements. Instead of changing visibility, these APIs will actually remove/re-render elements in the DOM.

List of elements

Header

  • header
  • leftPanelButton
  • viewControlsButton
  • panToolButton
  • selectToolButton
  • fitButton
  • zoomOutButton
  • zoomInButton
  • freeHandToolGroupButton
    • freeHandToolButton
    • freeHandToolButton2
    • freeHandToolButton3
    • freeHandToolButton4
  • textToolGroupButton
    • highlightToolButton
    • highlightToolButton2
    • highlightToolButton3
    • highlightToolButton4
    • underlineToolButton
    • squigglyToolButton
    • strikeoutToolButton
  • shapeToolGroupButton
    • rectangleToolButton
    • ellipseToolButton
    • lineToolButton
    • arrowToolButton
    • polylineToolButton
    • polygonToolButton
    • cloudToolButton
  • signatureToolButton
  • freeTextToolButton
  • stickyToolButton
  • miscToolGroupButton
    • calloutToolButton
    • stampToolButton
  • toolsButton
  • searchButton
  • menuButton

Panels

  • leftPanel
  • notesPanelButton
  • notesPanel
  • thumbnailsPanelButton
  • thumbnailsPanel
  • outlinesPanelButton
  • outlinesPanel
  • searchPanel

Overlays

  • viewControlsOverlay
  • defaultPageTransitionButton
  • continuousPageTransitionButton
  • singleLayoutButton
  • doubleLayoutButton
  • coverLayoutButton
  • rotateCounterClockwiseButton
  • rotateClockwiseButton
  • menuOverlay
  • filePickerButton
  • fullScreenButton
  • downloadButton
  • printButton
  • pageNavOverlay
  • toolsOverlay
  • searchOverlay

Popups

  • annotationPopup
  • annotationCommentButton
  • annotationStyleEditButton
  • annotationDeleteButton
  • annotationStylePopup
  • toolStylePopup
  • stylePopup
  • textPopup
  • copyTextButton
  • textHighlightToolButton
  • textUnderlineToolButton
  • textSquigglyToolButton
  • textStrikeoutToolButton
  • contextMenuPopup
  • panToolButton
  • stickyToolButton
  • highlightToolButton
  • freeHandToolButton
  • freeTextToolButton

Modals

  • signatureModal
  • signatureModalCloseButton
  • signatureModalClearButton
  • signatureModalSignButton
  • printModal
  • loadingModal
  • errorModal
  • passwordModal