Customize the HTML5 Editor / Viewer
Click here to see this page in full context
  1. Home >
  2. HTML5 PDF Viewer/Editor >
  3. Customize the HTML5 Editor / Viewer

Customize the HTML5 Editor / Viewer

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

 

Toolbar

The toolbar buttons can be customized to hide or show buttons using the qviewersettings.js file. New buttons can be added or existing buttons can be rearranged by modifying the HTML directly. 

Hide Buttons

To hide buttons edit the following in the qviewersettings.js file.

The ToolbarProperties object consists of visibility flags that are all turned on by default. To hide a single button or group of buttons, set the flag to false.

For example to hide the Print button set the flag to false:

// Toolbar configuration
// Set to false to hide buttons from the toolbar
const ToolbarProperties = {
    printVisible: false,

 

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.

 

Panels

The PaneProperties object in qviewersettings.js consists of flags that are all turned on by default. To disable (hide) pane, set the corresponding flag to false.

Hide Thumbnails Pane 

To hide the thumbnail pane edit the following in the qviewersettings.js file. 

PaneProperties = {
    // Set to false to hide the thumbnail pane
    thumbnailPaneEnabled: false,

Hide Bookmarks Pane

To hide the thumbnail pane edit the following in the qviewersettings.js file. 

PaneProperties = {
    // Set to false to hide the thumbnail pane
    bookmarkPaneEnabled: false,

Hide Comments Pane

To hide the thumbnail pane edit the following in the qviewersettings.js file. 

PaneProperties = {
    // Set to false to hide the thumbnail pane
    commentsPaneEnabled: false,

 

Annotation Defaults

To customize the default annotation properties, edit the qviewersettings.js file. 

There is a global AnnotationProperties object that sets default values for all editable properties and annotation types. To change default properties for all annotations, update the AnnotationProperties object.

A few annotations override some of these default properties, so you may need to edit those Properties objects separately. To change a default setting for a single annotation type, modify the corresponding Properties object. By default the individual Properties objects only contain the most common properties, but you can copy additional flags from the main AnnotationProperties object to modify additional settings.

For example: to change the pencil default color to blue edit the "color" property like below. 

const PencilProperties = {
    lineWidth: AnnotationProperties.lineWidth,
    color: blue,
    opacity: AnnotationProperties.opacity
}

Note: All edits must follow standard JavaScript formatting. For example Color can accept both standard basic color names as well as HEX color codes. 

 

Additional Flag Options

 

 

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.