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.
In any web page in which the viewer is to be utilized, all of the following scripts and styles must be included.
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"> |
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> |
OR
JS |
Copy Code |
---|---|
<link rel="stylesheet" href="~/Assets/Viewer/css/viewer.css"> <script src="~/Assets/Viewer/js/viewer.js"></script> |
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> |
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); |
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. |
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, …}. |
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. |
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. |
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. |
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> |