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:
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