Help Contents

Using Print2HTML5 Document API

Overview

To use Print2HTML5 Document API, you need to embed a document in your web page and then access Document API using JavaScript. The following article describes this in more detail.

Embedding an HTML5 document in a web page

To embed an HTML5 document in your web page, you need to use an IFRAME tag which you may place anywhere in your page:

<iframe src="docviewer.html#doc.xml" width="850" height="400" id="doc1"></iframe>

In the SRC attribute you need to specify an address of the HTML document viewer with the URL of the document to load and additional parameters. See this help topic for information on this address syntax: Initial Document Settings. To obtain a docviewer.html file, you need to convert any document with Print2HTML5 and click Save/Save HTML Document with HTML Preview Page button in the Print2HTML5 Application. The file is created in the folder associated with the preview file which name and location you selected in the Save dialog.

WIDTH and HEIGHT attributes specifies dimensions of the document inside your web page. ID attribute denotes the identifier which may be needed for accessing Print2HTML5 Document API.

Obtaining a reference to the document

You need to wait until your page is fully loaded before invoking Document API functions. You may achieve this if you wait until a custom onLoaded event is fired on your web page's document object:

document.onLoaded=function(docObj,docid) {
... // You may start invoking Document API here
}

The onLoaded event handler is passed two parameters:

  • docObj - is a reference to the HTML5 document object which has been loaded;
  • docid - is the identifier of the HTML5 document which has been loaded; this is the identifier you specified in the FRAME tag.

You have two ways of obtaining a reference to the HTML5 document instance: either retrieve it from the docObj parameter of the onLoaded event handler or get it using the identifier of your document you specified in the FRAME tag. In the latter case you may use getElementById function of your web page's document object:

var mydoc=document.getElementById(docid).contentDocument

 

Invoking Document API functions

Now, after onLoaded event has been fired, you may start invoking Print2HTML5 Document API functions. To call them, you just need to use the document reference you obtained earlier. For example, to scroll to the 4th page, you may invoke setCurrentPage function:

docObj.setCurrentPage(4);

 

Handling Document API events

To handle a Print2HTML5 Document API event, you need to add an event listener to the HTML5 document using addEventListener function. For example, to add a handler for onZoomChanged event, you may use the following call:  

doc.addEventListener('onZoomChanged', myOnZoomChanged, false);

The first parameter to this function specifies the name of the event. The second parameter is a reference to an event handler function. You need to declare this function somewhere in the global scope of your script:  

function myOnZoomChanged(event) { 
  alert(event.detail.sender+","+event.detail.zoom)
}

The function accepts a single event parameter which contains detailed information about the event in its detail property. The sender subproperty of event.detail property is the identifier of the HTML5 document you specified in the FRAME tag. Additionally, the detail property may contain other event parameters listed in the Print2HTML5 Document API events help topic. For example, for onZoomChanged event, zoom parameter stores a new zoom level.

To stop receiving event notifications, you need to call removeEventListener function: 

doc.removeEventListener('onZoomChanged', myOnZoomChanged);

Resizing the document

To resize HTML5 documents embedded in a web page, you may change width and height properties of the embedding IFRAME object:

document.getElementById(docid).width=500;
document.getElementById(docid).height=400;  

Print2HTML5 SDK contains a sample demonstrating embedding an HTML5 document into a web page and using Print2HTML5 Document API.