Hi Sow,
Thanks for reaching out. For adding buttons to WebViewer you must add the code to your myfiles/config.js file (may be named differently).
const viewer = new PDFTron.WebViewer({
path: libUrl, // path to the PDFTron 'lib' folder on your server
custom: JSON.stringify(myObj),
initialDoc: url,
config: myfilesUrl + '/config.js',
// this is where you need to add your changes
fullAPI: this.fullAPI,
enableFilePicker: true,
// l: 'YOUR_LICENSE_KEY_HERE',
}, viewerElement);
2. Inside of your myfiles/config.js file, you can use the viewerLoaded event to add a button as soon as the viewer is loaded. I will add a code snippet below with an example for this - adding a 'Save' button, that calls a saveDocument() function (you can also add hotkey combinations based on the example below)
window.addEventListener('viewerLoaded', async function() {
/**
* On keydown of either the button combination Ctrl+S or Cmd+S, invoke the
* saveDocument function
*/
readerControl.hotkeys.on('ctrl+s, command+s', e => {
e.preventDefault();
saveDocument();
});
// Create a button, with a disk icon, to invoke the saveDocument function
readerControl.setHeaderItems(function(header) {
var myCustomButton = {
type: 'actionButton',
dataElement: 'saveDocumentButton',
title: 'tool.SaveDocument',
img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>', onClick: function() {
saveDocument(); //your button click logic goes here
}
}
header.get('viewControlsButton').insertBefore(myCustomButton);
});
});
Let me know if that works for you - thanks!
Thomas