Custom Document Viewer Sample for HTML5 documents


Sample function:

This sample demonstrates creating a custom document viewer for HTML5 documents. It loads aò HTML5 document and displays it in a scrollable area. To create documents compatible with this viewer sample, you need to use Print2Flash's HTML5 document feature. The sample may be used as a base for creation of your own Print2Flash document viewer.

Installation instructions:

Just unpack the sample folder to disk.

Usage instructions:

The sample contains the following files:
  • sampleviewer.html - the custom viewer HTML file;
  • prevpage.png, nextpage.png - image files used as button images by the viewer;
  • doc.xml -  settings file for HTML5 document loaded by the viewer;
  • doc_files - document folder containing all document files.

To launch the sample, just open the sampleviewer.html file in your browser. You should see a toolbar displayed at the top of the page and a scrollable document below. The toolbar contains two buttons: Next Page and Previous Page which you may use for switching between pages.

To modify the sample, you need to open the sampleviewer.html file in a text or HTML editor, introduce necessary modifications and reload the viewer file in the browser.

If you want to display your own document using this sample, you need to create your HTML5 document using Print2Flash. Then you need to open the sampleviewer.html file in a text or HTML editor and modify:

  • SRC attribute of the IFRAME tag to make it point to the configuration XML file of your document in this line:

    <iframe id="Settings" style="display:none" src="doc.xml"></iframe>
     
  • Path to the document folder (doc_files) in this line:

    var pageFile = "doc_files/page" + i + ".svg";

Copyright (C) Print2Flash Software. All rights reserved

www.print2flash.com