Adding tool button to the PDFTron WebViewer

[sowbhagya M]

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

[twinter]

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

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