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

Display server-side documents in HTML5 Web Viewer control

Learn how to display server-side documents in HTML5 Web Viewer control
Pradeep Malage & Shivaranjini Mithun
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 display server-side documents in HTML5 Web Viewer control.

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 a ASP .NET Web Forms page to your project.
  7. Drag and drop the CSS files (default.theme.css, documentviewer.css) to the "<HEAD>" section of your page.
  8. Similarly, drag and drop the JS files to the "<HEAD>" section.
  9. <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="scripts/jquery-1.11.0.min.js"></script>
        <script src="scripts/documentviewer.min.js"></script> 
    
        <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 
     * 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. In the code-behind file of the form, use the following code in the Page_Load() method.

    public partial class WebForm1 : System.Web.UI.Page {
      protected void Page_Load(object sender, EventArgs e) {
        String sDocID, sDocPath;
        ViewerController vc = new ViewerController();
        sDocPath = Server.MapPath(".") + "\\App_Data\\sample.docx";
        sDocID = vc.LoadDocument(sDocPath);
        Page.ClientScript.RegisterHiddenField("hidden_document_field_id", sDocID);
      }
    }
    

    This code snippet assumes that the server-side documents have been kept in the "App_Data" folder. (You can choose a different location so long as it is accessible to the Page instance.) Next, use a Gnostice.Documents.WebHandler.ViewerController instance to transform the document in a manner that is usable to the HTML5 Viewer. This is done using the ViewerController.LoadDocument() method. This method returns a server-side document reference for the viewer. How do we pass this server-side document reference to the viewer? By creating a hidden field with the ClientScript.RegisterHiddenField() method. Here, "hidden_document_field_id" has been used as the hidden field's name. This field needs to be used in the form's JavaScript so that the viewer can display the document.

    function displayServerDocumentInViewer() {
      if (document.getElementById('hidden_document_field_id') != null) {
        documentViewer.loadDocument(
            document.getElementById('hidden_document_field_id').value);
      }            
    }
    

    Place this displayServerDocumentInViewer() JavaScript method in the HEAD section of the page. This JavaScript checks if the hidden field exists, and then makes the viewer to display the document identified by the server-side reference found in the hidden field.

    Execute displayServerDocumentInViewer() JavaScript method immediately after page has been loaded.

    <body onload="displayServerDocumentInViewer()" >
    
    

  12. 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>
    
  13. 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.
  14. 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.