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

A HTML5 viewer control for displaying DOCX, DOC, PDF and images (BMP, JPEG, PNG, TIFF) - Version 2016 R2 or below

Learn to use the new HTML5 viewer control in XtremeDocumentStudio .NET.
Pradeep Malage

In Version 2015 R1 of XtremeDocumentStudio .NET, our next-generation multi-format document-processing framework for .NET developers, we released a new HTML5 document-viewer control. It is a responsive HTML5 multi-format 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.

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

If you are using latest version of XtremeDocumentStudio (2016 R3 or above), 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.Controls.HTML.dll
    • Gnostice.Documents.dll
    • Gnostice.XtremeFontEngine.4.0.dll
    • Gnostice.XtremeImageEngine.dll
    • Newtonsoft.Json.dll
    • Ionic.Zlib.dll
  3. Add an App_Data folder to your project and give write permission to it.
  4. Copy the "CSS" and "Script" folders from the HTML folder of the installation folder to your project directory.
  5. In Solution Explorer, include the CSS and Script folders to your project (Show All Files » [folder] » Include In Project).
  6. Add an HTML page to your project.
  7. Drag and drop the CSS files (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.
  9. 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 HTML5
     * page. It can be used inline between the HEAD tags or
     * referred there from an external JS file.
     *
     * Variables that can be changed by you or needs to be
     * set by you are marked with triple slashes (///). Rest
     * of the code should be left as it is.
     *
     */
    
    var documentViewer;
    $(document).ready(function() {
      documentViewer =
        /* Creates a new HTML5 viewer and initializes it with
         * with specified settings.
         */
        new DocumentViewer({
          /* Specifies ASP.NET handler for generating the content
           * for the viewer control.
           */
          handlerUri: "DocumentViewer.axd",
    
          /// Specifies ID of the HTML element representing the
          /// viewer.
          id: 'doc-viewer-id',
    
          /// Specifies pixel density of the content displayed in
          /// the viewer.
          renderingDpi: 96,
    
          /// Specifies settings for the viewer.
          preferences: {
            /// Specifies whether the floating toolbar of the viewer
            /// should be displayed.
            toolbarVisible: true,
    
            /// Specifies whether page navigation controls needs to
            /// be displayed.
            visibleNavigationControls: {
              /// Specifies whether the "First Page" navigation control
              /// needs to be displayed.
              firstPage: true,
    
              /// Specifies whether the "Previous Page" navigation
              /// control needs to be displayed.
              prevPage: true,
    
              /// Specifies whether the "Next Page" navigation control
              /// needs to be displayed.
              nextPage: true,
    
              /// Specifies whether the "Last Page" navigation control
              /// needs to be displayed.
              lastPage: true,
    
              /// Specifies whether the "Page Number" indicator needs
              /// to be displayed.
              pageIndicator: true,
    
              /// Specifies whether the "Page Number" indicator needs
              /// to be displayed.
              gotoPage: true
            },
    
            /// Specifies whether page magnification controls needs to be
            /// displayed.
            visibleZoomControls: {
              /// Specifies whether page magnification drop-down options
              /// list needs to be displayed.
              fixedSteps: true,
    
              /// Specifies whether page zoom-in control needs to be
              /// displayed.
              zoomIn: true,
    
              /// Specifies whether page zoom-out control needs to be
              /// displayed.
              zoomOut: true
            },
    
            /// Specifies whether page rotation operation controls needs to be
            /// displayed.
            visibleRotationControls: {
              /// Specifies whether clockwise page rotation needs to be
              /// displayed.
              clockwise: true,
    
              /// Specifies whether counterClockwise page rotation needs to be
              /// displayed.
              counterClockwise: true
            },
    
            /// Specifies whether file operation controls needs to be
            /// displayed.
            visibleFileOperationControls: {
              /// Specifies whether "File Open" control needs to be
              /// displayed.
              open: true,
    
              /// Specifies whether "File Download" control needs to be
              /// displayed.
              download: true,
    
              /// Specifies whether "File Print" control needs to be
              /// displayed.
              print: true,
            },
    
            /// Specifies whether search operation controls needs to be
            /// displayed.
            searchControls: {
                /// Specifies whether "Quick Search" control needs to be
                /// displayed.
                enableQuickSearch: true,
    
                /// Specifies highlight color for text search in the
                /// viewer.
                highlightColor: "yellow"
            },
    
            /// Specifies whether color inversion controls needs to be
            /// displayed.
            visibleColorInversionControls: {
    
                /// Specifies whether "All Pages Color Inversion" control needs to be
                /// displayed.
                allPages: true
            }
    
    
          },
    
          /// Specifies event handlers for the viewer.
          events: {
            /// Occurs immediately before navigating to a new page.
            beforePageChange:
              function(
                  // Number of the current page (before navigation).
                  currentPage,
    
                  /// Number of the page to which the viewer will
                  /// navigate to.
                  newCurrentPage,
    
                  /// Whether page change should not be allowed.
                  cancel) {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately after navigating to a page.
            afterPageChange:
              function(
                  // Number of the page to which the viewer has
                  // navigated to.
                  currentPage) {
                  /// Your event-handler code
    
    
              },
    
            /// Occurs immediately before the page magnification is
            /// is to be changed
            beforeZoomChange:
              function(
                  /// Percentage of current page magnification
                  /// (before it is changed)
                  zoomPercentage) {
                /// Your event-handler code
    
    
              },
    
            afterZoomChange:
              function(
                  // Percentage of current page magnification
                  // (after it had been changed)
                  zoomPercentage) {
                /// Your event handler code
    
    
              },
    
            /// Occurs immediately before document load into viewer.
            beforeDocumentLoad:
              function(
                  /// documenturi of loading document
                  /// (before it is loaded)
                  documenturi,
                  /// Whether loading should not be allowed.
                  cancel) {
                /// Your event-handler code
    
              },
    
            /// Occurs immediately after document load into viewer.
            afterDocumentLoad:
              function() {
                /// Your event-handler code
    
              },
    
    
           /// Occurs immediately after document upload to the server.
           afterDocumentUpload:
           function (uri) {
               /// Your event-handler code
           },
    
            /// Occurs immediately before print the document.
            beforeDocumentPrint:
              function(
                  /// documenturi of printing document
                  /// (before it is printing)
                  documenturi,
                  /// Whether printing should not be allowed.
                  cancel) {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately after completing printing of
            ///the document.
            afterDocumentPrint:
              function() {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately before close the document.
            beforeDocumentClose:
              function (
                  /// documenturi of closing document
                  /// (before it is closing)
                  documenturi,
                  /// Whether closing should not be allowed.
                  cancel) {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately after closing the document.
            afterDocumentClose:
                function () {
                    /// Your event-handler code
              },
    
            /// Occurs immediately before rotation of the document.
            beforePageRotate:
              function (
                  /// Current angle of rotation  (before rotation).
                  currentRotationAngle,
                  /// New angle of rotation to apply
                  /// (Before rotation)
                  newRotationAngle,
                  /// Whether page rotation should not be allowed.
                  cancel) {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately after rotation of the document.
            afterPageRotate:
              function (
                  /// Current angle of rotation (after rotation).
                  currentRotationAngle) {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately before downloading the document.
            beforeDocumentDownload:
              function (
                  /// Download file format (before download).
                  downloadFileformat,
                  /// Whether download should not be allowed.
                  cancel) {
                /// Your event-handler code
    
    
              },
    
            /// Occurs immediately after document has been downloaded.
            afterDocumentDownload:
              function () {
                /// Your event-handler code
    
              }
            }
          }
        );
      }
    );
    </script>
    
    You can modify this code to add your event-processing logic.
  10. 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>
    
  11. 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="disk"/>
       <add key="license-key" value="your-license-key"/>
      </appSettings>
    
      <system.web>
        <compilation debug="true" targetFramework="4.5" />
        <httpRuntime targetFramework="4.5" />
        <httpHandlers>
           <add verb="GET,POST"
               path="DocumentViewer.axd"
               type="Gnostice.Documents.Controls.HTML.DocumentViewerHandler,
                     Gnostice.Documents.Controls.HTML"/>
        </httpHandlers>      
      </system.web>
    
      <system.webServer>
        <validation validateIntegratedModeConfiguration="false" />
        <handlers>
          <add name="XDocumentImage" 
               verb="GET,POST" 
               path="DocumentViewer.axd" 
               type="Gnostice.Documents.Controls.HTML.DocumentViewerHandler, 
                     Gnostice.Documents.Controls.HTML"/>
        </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.
  12. Build the project and run the Web application in your favourite browser.

---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.