XtremeDocumentStudio .NET
Next-generation multi-format document-processing component suite for .NET developers
Compatibility
Visual Studio 2010/2012/2013/2015

The New HTML5 Document Viewer control for displaying DOCX, DOC, PDF and images (BMP, JPEG, PNG, TIFF)

Learn to use the new HTML5 Document Viewer control in XtremeDocumentStudio .NET.
by Pradeep Malage & Shivaranjini Mithun

In Version 2016 R3 of XtremeDocumentStudio .NET, our next-generation multi-format document-processing framework for .NET developers, we released a new hugely upgraded version of the HTML5 Document Viewer control. It is a responsive multi-format HTML5 Document Viewer that can be used in any ASP.NET Web application. End-users will not require a browser plugin or viewer application such as Adobe Reader or Microsoft Word. You can give it a test run at demos.gnostice.com .

To follow the steps in this article, please download and install the new XtremeDocumentStudio .NET Ultimate free trial from the Downloads section. If you already have the full Registered version, please download the latest update.

In this article, you will learn how to use this HTML5 Document Viewer in an ASP.NET web application.

If you are still using older version of XtremeDocumentStudio (2016 R2 or older), please refer to this article link

  1. Open Visual Studio and create a new "empty" Web application.
  2. Add references to the following DLLs (from the XtremeDocumentStudio installation folder) and set their "Copy to Local" property to True.
    • Gnostice.Core.dll
    • Gnostice.Documents.dll
    • Gnostice.XtremeFontEngine.4.0.dll
    • Gnostice.XtremeImageEngine.dll
    • Ionic.Zip.Reduced.dll
    • Quartz.dll
    • Common.Logging.dll
    • Common.Logging.Core.dll
    • Newtonsoft.Json.dll
    • Gnostice.Documents.WebHandler.dll
  3. Add an App_Data folder to your project and give write permission to it.
  4. Copy the "css" and "scripts" folders from the HTML folder of the installation folder to your project directory.
  5. In Solution Explorer, include the css and scripts folders to your project (Show All Files » [folder] » Include In Project).
  6. Add an HTML page to your project and set it as the start page.
  7. Drag and drop the CSS files (jquery-ui.css, default.theme.css, documentviewer.css) to the "<HEAD>" section of your HTML page.
  8. Similarly, drag and drop the JS files to the "<HEAD>" section. Please note that the ordering of JS files is important (jQuery should be at the top).
  9. <head>
        <title></title>
        <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> 
        
        <link href="~/CSS/jquery-ui.css"  rel="stylesheet" />
        <link href="~/CSS/documentviewer.css" rel="stylesheet" />
        <link href="~/CSS/default.theme.css" rel="stylesheet" />
    </head>
    
  10. Add the following SCRIPT segment to the "<HEAD>" section. (A copy of this JavaScript code would have been copied to your installation folder. You could simply use it instead.) The Document Viewer control is referred in this script using the variable "documentViewer".
    <script>
    /*
     *
     * This JavaScript segment should be used in your View
     * page. It can be used inline between the HEAD tags or
     * referred there from an external JS file (ViewerInitializer.js).
     *
     */
    
    var documentViewer;
    $(document).ready(function() {
      
        /* Creates a new HTML5 viewer and initializes it */
         
    	 documentViewer = new gnostice.DocumentViewer('doc-viewer-id');
      }
    );
    </script>
    
  11. Add a DIV tag like this and give it the same ID ("doc-viewer-id") used in the SCRIPT segment given above.
    <div id="doc-viewer-id" style="width:100%;height:700px;"></div>
    
  12. We are not done yet. Open the Web.config file and make changes similar to this. Please use the correct license key in the appSettings tag.
    <configuration>
    
      <appSettings>
       <add key="DiskPath" value="App_Data"/>
       <add key="DocumentCache" value="memory"/>
       <add key="license-key" value="your-license-key"/>
      </appSettings>
    
      <system.web>
        <compilation debug="true" targetFramework="4.5" />
        <httpRuntime targetFramework="4.5" />
        <httpHandlers>
           <add verb="*"
               path="DocumentHandler.axd"
               type="Gnostice.Documents.WebHandler.DocumentHandler,
                     Gnostice.Documents.WebHandler"/>
        </httpHandlers>      
      </system.web>
    
      <system.webServer>
        <validation validateIntegratedModeConfiguration="false" />
        <handlers>
          <add name="XDocumentImage" 
               verb="*" 
               path="DocumentHandler.axd" 
               type="Gnostice.Documents.WebHandler.DocumentHandler, 
                     Gnostice.Documents.WebHandler"/>
        </handlers>
      </system.webServer>
    
    </configuration>
    
    In a fresh ASP.NET Web application project, the Web.config file will already have a system.web tag and you will have to modify it appropriately, not as is. The appSettings and system.webServer tags will have to be added afresh
  13. Build the project and run the Web application in your favourite browser.

Related articles:

---o0O0o---

Our .NET Developer Tools
XtremeDocumentStudio .NET

Multi-format document-processing component suite for .NET developers.

PDFOne .NET

A .NET PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, and bookmark PDF documents in .NET applications.

Our Delphi/C++Builder developer tools
XtremeDocumentStudio Delphi

Multi-format document-processing component suite for Delphi/C++Builder developers, covering both VCL and FireMonkey platforms.

eDocEngine VCL

A Delphi/C++Builder component suite for creating documents in over 20 formats and also export reports from popular Delphi reporting tools.

PDFtoolkit VCL

A Delphi/C++Builder component suite to edit, enhance, view, print, merge, split, encrypt, annotate, and bookmark PDF documents.

Our Java developer tools
XtremeDocumentStudio (for Java)

Multi-format document-processing component suite for Java developers.

PDFOne (for Java)

A Java PDF component suite to create, edit, view, print, reorganize, encrypt, annotate, bookmark PDF documents in Java applications.

Our Platform-Agnostic Cloud and On-Premises APIs
StarDocs

Cloud-hosted and On-Premises REST-based document-processing and document-viewing APIs

Privacy | Legal | Feedback | Newsletter | Blog | Resellers © 2002-2017 Gnostice Information Technologies Private Limited. All rights reserved.