Adding tool button to the PDFTron WebViewer

62 views
Skip to first unread message

sowbhagya M

unread,
Feb 19, 2021, 2:39:07 PM2/19/21
to PDFTron WebViewer
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

unread,
Feb 19, 2021, 3:18:11 PM2/19/21
to PDFTron WebViewer
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
Reply all
Reply to author
Forward
Message has been deleted
0 new messages