These PDF.js Express samples show 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 your PDF.js Express Web Viewer, and embed custom icons into the toolbar to match your look and feel. View demo.
Below are some code snippets for some common customization use cases.
Change UI theme
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
// change to dark mode
instance.UI.setTheme('dark');
// change to light mode
instance.UI.setTheme('light');
})
See this guide for more info on custom themes.
Hide/show UI elements
You can use the enableElements and disableElements APIs to hide/show items in the UI.
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
// disable settings button
instance.UI.disableElements(['menuButton'])
// disable search
instance.UI.disableElements(['searchButton']);
// disable pan tool
instance.UI.disableElements(['panToolButton'])
})
See this guide for more information on enabling/disabling elements.
Disable features
We provide an API to disable certain features of the viewer.
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
// disable printing
instance.UI.disableFeatures([instance.UI.Feature.Print])
// disable text selection
instance.UI.disableFeatures([instance.UI.Feature.TextSelection])
// disable annotations
instance.UI.disableFeatures([instance.UI.Feature.Annotations])
})
Add custom buttons to UI
WebViewer(
{ ...options },
document.getElementById('viewer')
).then(instance => {
const newButton = {
type: 'actionButton',
img: 'path/to/image',
onClick: () => {
alert('Hello world!');
},
dataElement: 'alertButton',
}
// Add a new button that alerts "Hello world!" when clicked
instance.UI.setHeaderItems((header) => {
header.push(newButton)
})
})
See this guide for more information on adding items to the header
