Introduction

Gnostice XtremeDocumentStudio .NET Multi-format HTML5 Document Viewer is the next-generation multi-format document-viewing technology for .NET developers. The DocumentViewer control supports viewing, interactive form filling, searching (With OCR support) and printing PDF, DOCX, DOC, XLS, XLSX, ODS, BMP, JPEG, PNG, WMF, EMF, and single-page and multi-page TIFF. It works on both desktop (Windows 7, Windows 8.1, Linux, Mac OS X) and mobile browsers (IOS, Android, Windows Phone).

Supported Browsers

Supported Formats

HTML5 Document Viewer Control

Features

  • Responsive HTML5 control
  • No browser plug-ins required
  • Compatible with all browsers and devices
  • Feature Rich PDF Form Filling
  • Interact with PDF using Annotations
  • Text search support on PDF, DOCX, DOC, BMP, JPEG, PNG, WMF, EMF, and single-page and multi-page TIFF.
  • Searching text in scanned document with integrated OCR engine
  • Single-click document printing on client printer
  • Download copy of document on client device
  • Open documents stored on client device
  • Navigation through thumbnails and bookmarks
  • DownloadAs toolbar control to convert the uploaded document to desired format - PDF, DOCX, HTML, TIFF.
  • Enable and disable opening client-side documents, saving and printing through properties on the viewer object
  • Show and hide file operation, navigation and zooming controls through properties on the viewer object
  • Open webpages with documents pre-loaded in the viewer
  • Open documents stored on the server using client-side APIs
  • Multi-page continuously scrollable viewing surface
  • Painless implementation, customization and deployment
  • Fully customizable user-interface through CSS
  • Perform all operations through client side JavaScript when required
  • Supported Formats: PDF, DOCX, DOC, XLS, XLSX, ODS, BMP, JPEG, PNG, WMF, EMF, and single-page and multi-page TIFF.

How to display documents in ASP.NET HTML5 applications?

Step 1: Add the following references to your project:

  • Gnostice.Core.dll
  • Gnostice.Documents.dll
  • Gnostice.XtremeFontEngine.4.0.dll
  • Gnostice.XtremeImageEngine.dll
  • Ionic.Zlib.dll
  • Common.Logging.Core.dll
  • Common.Logging.dll
  • Quartz.dll
  • Newtonsoft.Json.dll
  • Gnostice.Documents.WebHandler.dll

Step 2: Refer the following Javascript, stylesheet and image files in your application:

  • jquery-1.11.0.min.js
  • jquery-ui.min.js
  • documentviewer.min.js
  • viewerinitializer.js (Note: Initialize and customize document viewer control)
  • jquery-ui.css
  • documentviewer.css
  • default.theme.css
  • Control images:

Step 3: Add the following settings to web.config file:

<system.web>
      <httpHandlers> 
          <add verb="*" path="DocumentHandler.axd"  
            type="Gnostice.Documents.WebHandler.DocumentHandler, Gnostice.Documents.WebHandler"/> 
      </httpHandlers>
</system.web>

                        
<system.webServer> 
    <handlers> 
          <add name="XDocumentImage" verb="*" path="DocumentHandler.axd"  
            type="Gnostice.Documents.WebHandler.DocumentHandler, Gnostice.Documents.WebHandler"/>
      </handlers>
</system.webServer>
<appSettings>        
   <add key="DocumentCache" value="memory"/>
   <add key="license-key" value="License-Key"/>
</appSettings>

Step 4: Instantiate document viewer control in javascript.

DocumentViewer.html after performing this step:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gnostice Document Document</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Document viewer control scripts -->
<script src="Scripts/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery-ui.min.js"></script>
<script src="Scripts/documentviewer.min.js"></script>
<script src="Scripts/viewerinitializer.js"></script>
<!--Document viewer control stylesheets --> <link href="Stylesheets/jquery.ui.css" rel="stylesheet" />
<link href="Stylesheets/documentviewer.min.css" rel="stylesheet" />
<link href="Stylesheets/default.theme.css" rel="stylesheet" />
</head> <body> <div id="doc-viewer-container" style="width:100%;height:700px" ></div> </body> </html>

You are now ready to run your web application with the Gnostice HTML5 Document Viewer