Some test text!
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 DownloadTo run this sample, get started with a free trial of Apryse SDK.
JavaScript
HTML
WebViewer(
{
path: '../../../lib',
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);
}
};
});
});