HTML5 PDF Notes Viewer

The HTML5 PDF Notes Viewer is a PDF viewer that is developed using HTML5 and JavaScript. It allows you to add annotations to the document. It works in tandem with the PDF Automation Server to convert supported files (.pdf, .doc, .docx, .jpeg, .png, gif, .tiff) directly to SVG format and then serve the document to the viewer.

Below are instructions on how to get started using the web viewer. The HTML5 viewer can be added to the page with minimal coding by simply creating an iframe element on the page with the URL to the document.

HTML5 PDF Notes Viewer

The standard viewer is designed to run on any desktop browser. The standard viewer can be loaded by itself as a full page viewer or embedded directly within the page using an iframe. A sample of the viewer embedded in an iframe can be found in the installation directory under "/html/viewer".

Creating a Direct Link to the Viewer

Create a link to serve a PDF to the user in the following format:

"http://{host}:{port}/viewer/pdfnotes.html?filePath={path}" replacing {host} with the hostname or IP address of the PAS server, {port} with the Port set for the rest service (default 8090), and {path} with the relative path of the file stored within the "storage" directory of the PAS server. See REST Settings in the user guide for details on managing the hostname, port, and storage directory settings.

Navigate to the created URL to test the standard viewer.

Embedding the Viewer Within a Page

Create a new HTML page or choose an existing page to add the PDF Viewer to.
Add styling for the iframe to fit the area that you need. The below example creates a frame that fills most the page.

Note: The toolbar will resize automatically based on width but recommended 1,000px minimum.

<style>

body, html {

margin: 0;

padding: 15px;

height: 96%;

overflow: hidden;

}

/* Style the iframe: toolbar will resize automatically based on width but recommended 1,000px minumum */

iframe {

width: 100%;

height: 100%;

border: none;

}

/* Required to make the full screen button work */

.iframe-fullscreen {

position: absolute;

left:0px;

top:0px;

width: 100%;

height: 100%;

border: none;

z-index: 999;

}

</style>

Add an iframe element to the page where you would like the viewer to appear.
Set the attributes & additional options for the iframe. The iframe source (src) to the viewer URL must follow the below format:

"http://{host}:{port}/viewer/pdfnotes.html?filePath={path}" replacing {host} with the hostname or IP address of the PAS server, {port} with the Port set for the rest service (default 8090), and {path} with the relative path of the file stored within the "storage" directory of the PAS server. See REST Settings in the user guide for details on managing the hostname, port, and storage directory settings.

<html>

<body>

</body>

</html>

NOTE: If embedding the viewer in an iframe, the origin (domain, protocol, and port) MUST match the parent page. If not the iframe may not load due to browser security settings. Use the following code instead for Cross-Origin iframe.

<html>

<body>

setTimeout(function(){

var url = window.location.href;

window.frames.pdfviewer.postMessage(url, "*");

}, 500);

</script>

</body>

</html>

Load the web page on your server to test the viewer

HTML5 Mobile PDF Notes Viewer

The mobile viewer is designed specifically to run on mobile devices with smaller screens. The mobile viewer has been optimized to make the best use of the entire area on smaller screens as well as touch enhanced navigation. You will need to either create a direct link to the mobile viewer ("mpdfnotes.html") or add code to automatically redirect the user to the mobile viewer page if a mobile device is detected.

NOTE: For best results the mobile viewer should NOT be loaded within an iframe and should instead be served directly to the user as it's own page. It's recommended that instead of using redirect code, you should provide a direct link to the mobile viewer is created for mobile users. This will prevent unnecessary page flashing and shorten loading times on mobile browsers.

Creating a Direct Link to the Mobile Notes Viewer

Create a link to serve the PDF to the mobile user in the following format:

"http://{host}:{port}/viewer/mpdfnotes.html?filePath={path}" replacing {host} with the hostname or IP address of the PAS server, {port} with the Port set for the rest service (default 8090), and {path} with the relative path of the file stored within the "storage" directory of the PAS server. See REST Settings in the user guide for details on managing the hostname, port, and storage directory settings.

Load the webpage on your server using a mobile device to test the mobile viewer

Using JavaScript to Redirect to the Mobile Viewer

Below are instructions on how to setup a page redirect for mobile devices using JavaScript.

Follow the instructions for Setting Up the HTML5 PDF Viewer above.
Add the following JavaScript code to redirect the browser if a mobile device is detected to the header of the page (or create your own).
NOTE: Make sure to replace {host} with the hostname or IP address of the PAS server, {port} with the Port set for the rest service (default 8090). See REST Settings in the user guide for details on managing the hostname & port settings.

window.onload = function() {

var docUrl = "http://{host}:{port}/viewer/mpdfnotes.html?filePath=" + getFilePath();

if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)

|| navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)

|| navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Touch/i)

|| navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/Silk/i)){

window.location.replace(docUrl);

} else {

window.onbeforeunload = function(e) {

var dialogText = e.returnValue;

return dialogText;

};

}

function getFilePath() {

var url = window.document.getElementById("viewerFrame").getAttribute("src");

var docPath = url.split("=");

return docPath[docPath.length - 1];

}

</script>

Load the webpage on your server using a mobile device to test the automated redirect and mobile viewer