Customize the HTML5 Toolbar

PDF Automation Server comes packaged with a ready to go HTML5 PDF Viewer that uses the REST server to view/modify documents directly in the browser with no plug-ins required. The HTML5 viewer can be added to any page with minimal coding by simply creating an iframe element on the page with the path to the document stored on the server. If you wish to customize the HTML5 PDF Viewer Toolbar follow the instructions below.

First follow the below instructions to setup the HTML5 PDF Markup or Viewer on your server:

Once setup edit the HTML viewer files found in html\viewer directory:

Using any HTML or Text editor (such as Notepad++) edit the HTML file for the product you wish to use:

All of the buttons are in the first part of the <body> in the <div class=”toolbar”> element. You can follow the instructions below to add or remove buttons.

REMOVE BUTTONS

To remove or hide a button just delete or comment out any of the buttons or groups you don’t want. For example, to remove the redaction button from the toolbar remove the following lines of code:

<span class="buttonGroup">

     <button id="btnRedact" class="viewerbtn dropdown-toggle drawingbtn" title="Mark for Redaction" data-sticky="true"><img src="images/redaction.png"><span class="caret"></span></button>

</span>

ADD NEW BUTTONS

To add new buttons, you can just add new lines to the anywhere in the 

element. For example you can add a new button by inserting the code below next to one of the other buttons on the toolbar. Once you have added the button you will need to attach either JavaScript or a Listener to perform the action you wish the button to do. (see https://www.w3schools.com/jsref/event_onclick.asp for one example of how to do this)

 

<span class="buttonGroup">      

<button id="myNewButton" class="viewerbtn" title="myToolTip"><img src="imagePathOnServer" /></button>

</span>

TIP: Buttons can also be rearranged or organized differently by just reordering the HTML code.

Once you have completed the changes and save the file to the server they will take affect the next time the HTML5 Markup or Viewer is loaded.

 


Qoppa Software's PDF Automation Server for Windows, Linux, Unix, and macOS

Automate PDF Document Workflows through RESTful Web Services & Folder Watching

Copyright © 2002-Present Qoppa Software. All rights reserved.