Help Contents

Designing Custom Viewer for HTML5 Documents

Designing your own document viewer is the most flexible document customization solution. Implementing such an approach will allow you to customize all aspects of document viewer including how document pages are shown, scaled, positioned, etc., the view and functionality of the scrollbars, the toolbar appearance and functionality and so on.

Designing a viewer for HTML5 documents requires HTML and JavaScript programming and designing skills as document viewers are just regular HTML pages with linked page image SVG files.

Print2HTML5 SDK contains a sample of a simple document viewer for HTML5 documents. We recommend using this sample as a starting point when developing your own viewer. The description below deals with this sample code so refer to it for full details.

To apply your custom viewer to Print2HTML5, you need to open HTML5 Output tab of Document Options window, click Use Custom Template option and pick your custom viewer file from disk. Then you may convert your documents using Print2HTML5 as usual and you will obtain HTML5 documents displayed by this viewer.

HTML5 document format

Print2HTML5 generates HTML5 documents in a special format. HTML5 documents are composed of:

  1. Document settings XML file
  2. Document folder with page SVG files and other support files (fonts, images, etc.)

Each page of a document is represented by a separate Scalable Vector Graphic (SVG) file. The files are named page1.svg, page2.svg, etc., the number suffix corresponding to the page number. You may load these SVG files in your own viewer for displaying to users in any way you want. The SVG files are located in the document folder.

Additionally, Print2HTML5 generates a document file which is a XML file which contains all document settings which may help the viewer in rendering the document.

For example, a typical document may be composed of the following files and folders:

  • doc.xml - document settings file.
  • doc_files document folder:
    • page1.svg - the first page file;
    • page2.svg - the second page file;
    • page3.svg - the third page file;
    • Font1.woff - a font used by page files;
    • other support files.

Viewer URL

To create a viewer which is compatible with HTML5 documents generated by Print2HTML5, it needs to support special parameters in the URL as described in Initial Document Settings help topic. In its simplest form the viewer URL is composed of a viewer file URL followed by hash (#) sign after which goes the URL of the document settings XML file, for example:

sampleviewer.html#doc.xml

The viewer should load the document which URL is specified after the hash sign. By modifying the document URL after the hash you may make a single viewer file display any document you wish.

Loading document settings

Before your viewer may start rendering the document, you need to load the document settings file. This file contains vital document information such as the total number of pages, width and height of each page, etc.

Settings are stored in a document settings XML file. First, we need to retrieve the settings file URL from the viewer URL:

var DocURL = location.hash.substring(1)

Then, to load a settings file in your viewer, you may use a hidden IFRAME tag:

document.write('<iframe id="Settings" style="display:none" src="' + DocURL + '"></iframe>');

You need to specify the URL of the document settings file in the SRC attribute.

To determine the moment when the your viewer and the settings file are loaded, you need to listen for onload event on the viewer's BODY tag:

<body onload="OnLoad()" ...>

Retrieving document settings

After the settings are loaded, you may retrieve document settings. Document may have a number of settings stored in the settings XML file. The list of common available settings is contained in Custom Document Viewer Settings help topic. To read these settings, first you need to retrieve the root node from the XML file and store it in a global variable:

function OnLoad() {
  docSettings = document.getElementById('Settings').contentWindow.document.documentElement.attributes;
  ...

To facilitate reading of settings, you may declare GetSetting function:

function GetSetting(name) 
{ 
  return docSettings.getNamedItem(name).value; 
}

After that you can use the declared GetSetting function to retrieve a setting value passing it the setting name as a parameter. For example, to get the number of pages of the document, you may use this code:

var pageNum=GetSetting("PageNum");

Rendering the document

After the settings are retrieved, you may start rendering the document. You may present the document to the user in any way you like it. The page image SVG files reside in the document folder and are named page1.svg for the first page of the document, page2.svg for the second page and so on. You may load these page image files in your viewer and use and display them as you like it. You may, for example, display only a single page at a time allowing a user to switch between pages with buttons. Or you may display the document in a booklet style. The approach you may choose is limited only by capabilities of web browsers and your imagination.

In our sample we demonstrate how a document can be presented as a vertical scrollable stack of pages as the standard Print2HTML5 document viewer does. To achieve this, we insert the document SVG page files in a scrollable DIV element:

<div id="DocArea" style="overflow: auto;"></div>

To insert the list of pages inside this tag, we create HTML code string composed of a sequence of IFRAME tags, each tag corresponding to each page. First, we retrieve widths and heights of each page as well as get a reference to the DIV container and initialize HTML code string variable (innerHTML): 

var Widths = GetSetting('Widths', '').split(',')
var Heights = GetSetting('Heights', '').split(',')
DocArea = document.getElementById('DocArea');
var innerHTML = "";

You also need to determine the name of the document folder by removing settings file extension (.xml) and appending _files to it:

var DocFolderURL=DocURL.substr(0,DocURL.lastIndexOf("."))+"_files";

Then, we need to enumerate each page and create HTML code for each page composed of an IFRAME tag:

for (var i = 1; i <= pageNum; i++) {
  var pageFile = DocFolderURL+"/page" + i + ".svg";
  innerHTML += "<iframe id='Page" + i + "' scrolling='no' style='border:10px solid gray;background-color:white;' width='" +
    Widths[i - 1] + "' height='" + Heights[i - 1] + "' src='" + pageFile + "'></iframe>";
}

Note that we set SRC attribute of IFRAME tags to the URLs of document pages which are stored in the document folder. After the HTML code string is filled, we can insert it in the DIV container:

DocArea.innerHTML = innerHTML;

After that the browser should start loading document pages in IFRAME tags and display them in the scrollable container DIV element.

Accessing pages

If you need to access individual page IFRAME elements, you may retrieve a reference to each page with this code:

var page = document.getElementById("Page" + pageno)

This reference will point to an IFRAME object representing the page which number is specified by pageno variable.

If you need a reference to an SVG document object representing a page, you may use the following code to get it:

var svgpage = document.getElementById("Page" + pageno).contentDocument.documentElement