ImageGear .NET v24.12 - Updated
Instantiating and Customizing the HTML5 Viewer
User Guide > How to Work with... > Common Operations > Viewing > Viewing with the HTML5 Viewer > Instantiating and Customizing the HTML5 Viewer

Before you can instantiate or customize the HTML5 you must correctly configure the ImageGear.Web back-end. Configuration is done in "Web.config" and by the inclusion of "ImageGearService.svc". You can either manually edit Web.config or configure using the Web.Config Editor provided with the distribution.

HTML5 Viewer has external dependencies on jQuery and Bootstrap. ViewerControl has no external dependencies.

Including Scripts and Styles

In any web page in which the viewer is to be utilized, all of the following scripts and styles must be included.

jQuery, Bootstrap, and Bootstrap.js

First, you must include the external dependencies of jQuery, Bootstrap, and Bootstrap.js. It is recommended you obtain them from a CDN as follows:

JS
Copy Code 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Viewer Styles and Scripts

You must then include "viewer.css" and the HTML5 Viewer JavaScript files. You may either choose to include all of the unmodified source files or the concatenated and minified "viewer.js". The urls to this files are specified relative to the server root directory, indicated with a tilde (‘~’).

JS
Copy Code 
<link rel="stylesheet" href="~/Assets/Viewer/css/viewer.css">
<script src="~/Assets/Viewer/js/ImGearFirstPage.js"></script>
<script src="~/Assets/Viewer/js/ImGearGoToPage.js"></script>
<script src="~/Assets/Viewer/js/ImGearLastPage.js"></script>
<script src="~/Assets/Viewer/js/ImGearNextPage.js"></script>
<script src="~/Assets/Viewer/js/ImGearPrevPage.js"></script>
<script src="~/Assets/Viewer/js/ImGearRotateDoc.js"></script>
<script src="~/Assets/Viewer/js/ImGearRotatePage.js"></script>
<script src="~/Assets/Viewer/js/ImGearZoomIn.js"></script>
<script src="~/Assets/Viewer/js/ImGearZoomOut.js"></script>
<script src="~/Assets/Viewer/js/ImGearZoomSelect.js"></script>
<script src="~/Assets/Viewer/js/ImGearViewer.js"></script>
<script src="~/Assets/Viewer/js/ImGearViewer.Util.js"></script>
<script src="~/Assets/Viewer/js/ImGearAnnotationBar.js"></script>
<script src="~/Assets/Viewer/js/ImGearSearchBar.js"></script>

OR

JS
Copy Code 
<link rel="stylesheet" href="~/Assets/Viewer/css/viewer.css">
<script src="~/Assets/Viewer/js/viewer.js"></script>

ViewerControl Styles and Scripts

Finally, you must include "viewercontrol.css" and "viewercontrol.js" as follows:

JS
Copy Code 
<link rel="stylesheet" href="~/Assets/ViewerControl/css/viewercontrol.css">
<script src="~/Assets/ViewerControl/js/viewercontrol.js"></script>

Instantiating the Viewer

HTML5 Viewer is instantiated using a DOM Element or CSS Selector and an options object which must at least contain a documentID and imageHandlerUrl as follows:

JS
Copy Code 
var igViewer = new IGViewer.Viewer(elem, options);

HTML5 Viewer Parameters

elem A DOM Element or CSS Selector string.
options An object at least specifying the property "documentID". A complete list of available options can be found below.

IGViewer.Viewer Options Object Properties 

Property

Type

Default

Description

documentID

string

N/A

(required) The Document Identifier of the document the viewer is to display

imageHandlerUrl

string

"ImageGearService.svc"

(strongly recommended) The url to "ImageGearService.svc" which should be located in your server root directory. It defaults to a relative url, however, it is recommended this is specified as an absolute url, prefixed with a forward slash (‘/’).

viewerIconsPath

string

"Assets/Viewer/icons"

(strongly recommended) The url to the directory containing the icons to be used for viewer buttons. It defaults to "Assets/Viewer/icons" as a relative path from the current url, per the directory structure of the distributed files. These icons are customizable through the options.viewerIcons object. It is recommended this is specified as an absolute url, prefixed with a forward slash (‘/’).

viewerIcons

object

Elaborated in ‘Changing Viewer Icons’

(optional) An object whose properties specify the urls to the icons to be used for viewer buttons. These urls are relative to options.viewerIconsPath. The properties are enumerated below in the subsection "Changing Viewer Icons".

viewMode

string

IPCC.ViewMode.Document

(optional) The mode used to view documents containing different sized pages. Must be one of the one of the values in the IPCC.ViewMode enum, described in a further subsection.

pageLayout

string

IPCC.PageLayout.Vertical

(optional) Set the placement or arrangement of the pages in the viewer. Must be one of the values in the IPCC.PageLayout enum, described in a further subsection.

pageRotation

number

0

(optional) Sets a default rotation to be applied to each page. Must be a multiple of 90:

{..., -270, -90, 0, 90, 180, 270, …}.

Changing Viewer Icons

Any of the icons for the viewer can be easily changed through the properties of the options.viewerIcons object, which are enumerated below. The values of this properties must be strings which specify the relative paths to images to be used as icons from options.viewerIconsPath. options.viewerIcons and any property thereof is optional. 

Property

Type

Default

Description

zoomOut

string

"zoomout.svg"

(optional) The icon to be used for the zoom out button.

zoomIn

string

"zoomin.svg"

(optional) The icon to be used for the zoom in button.

firstPage

string

"firstpage.svg"

(optional) The icon to be used for the first page button.

prevPage

string

"prevpage.svg"

(optional) The icon to be used for the previous page button. Defaults to "prevpage.svg".

nextPage

string

"nextpage.svg"

(optional) The icon to be used for the next page button.

lastPage

string

"lastpage.svg"

(optional) The icon to be used for the last page button.

rotateDocCC

string

"rotate-doc-cc.svg"

(optional) The icon to be used for the button to rotate the document counter-clockwise.

rotateDocCW

string

"rotate-doc-cw.svg"

(optional) The icon to be used for the button to rotate the document clockwise.

rotatePageCC

string

"rotate-page-cc.svg"

(optional) The icon to be used for the button to rotate the currently displayed page counter-clockwise.

rotatePageCW

string

"rotate-page-cw.svg"

(optional) The icon to be used for the button to rotate the currently displayed page clockwise.

IPCC.ViewMode Enum 

Property

Description

IPCC.ViewMode.Document

The viewer maintains the relative size of each page when displaying a document. For example, if page 2 is smaller than page 1, it will appear smaller.

IPCC.ViewMode.SinglePage

The viewer displays a single page at a time. Each page is scaled to fit within a view box, which is the initial size of the viewer and increases in size when zooming in (and decreases in size when zooming out). After the viewer initializes, the view mode may not be changed to or from SinglePage view mode (an Error will be thrown in this case).

IPCC.ViewMode.EqualFitPages

The viewer scales each page so that their width is the same, when using vertical page layout. For example, if page 2 is smaller than page 1, it will be scaled larger so that its width is equal ot the width of page 1. If using horizontal page layout, the viewer scales each page so that their height is the same.

IPCC.PageLayout Enum 

Property

Description

IPCC.PageLayout.Horizontal

Pages are displayed as a single horizontal row and a horizontal scroll bar is displayed to bring into view pages that are not in view.

IPCC.PageLayout.Vertical

Pages are displayed as a single vertical column and a vertical scroll bar is displayed to bring into view pages that are not in view.

A Complete Code Example

JS
Copy Code 
<html>
    <head>
        <!-- external dependencies from CDN →
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"
                integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
                crossorigin="anonymous"></script>
        <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
        </script>
        <link rel="stylesheet"
              href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <!-- Viewer style and script(s) →
        <link rel="stylesheet" href="~/Assets/Viewer/css/viewer.css">
        <script src="~/Assets/Viewer/js/viewer.js"></script>
        <!-- ViewerControl style and script →
        <link rel="stylesheet" href="~/Assets/ViewerControl/css/viewercontrol.css">
        <script src="~/Assets/ViewerControl/js/viewercontrol.js"></script>
        <script type="text/javascript">
            var igViewer;
 
            // initialize viewer on page load completion
            $(function () {
                igViewer = new IGViewer.Viewer("#viewer", {
                    documentID: "mydocument.pdf",
                    imageHandlerUrl: "/ImageGearService.svc",
                    viewerIconsPath: "/Assets/Viewer/icons"
                });
            });
        </script>
    </head>
    <body>
        <div id="viewer"></div>
    </body>
</html>

  

 

 

©2020. Accusoft Corporation. All Rights Reserved.

Send Documentation Feedback  |  Get Product Support