Adding tool button to the PDFTron WebViewer

Technical Support WebViewer
1

Hello,

I am exploring PDFTron. Followed the steps as mentioned in https://www.pdftron.com/documentation/web/get-started/salesforce/

Now I am able to view the documents in the WebViewer.
I would like to add custom button in the Webviewer.
These are the lwc got part of this -
pdftronFilePickerCombobox
pdftronWebViewer
pdftronWvFileBrowserComponent

myfiles/visualforce-page-viewing.js

Where should i need to add the code for button ‘instance.setHeaderItems(function(header)’

Please let me know, what is the procedure to get Webviewer({ }, document.getElementById(‘viewer’))

So that I can add above code and try to display button.

Thanks,

Sow

2

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).

  1. In the sample posted on https://github.com/PDFTron/webviewer-salesforce there are multiple config files - check your pdftronWebViewer component for the new PDFTron.WebViewer() instantiation where the config is set:

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);

  1. 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: ‘’,
onClick: function() {
saveDocument(); //your button click logic goes here
}
}
header.get(‘viewControlsButton’).insertBefore(myCustomButton);
});
});

Let me know if that works for you - thanks!
Thomas