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,

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:

• disableElements
• enableElements
• isElementDisabled

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