Basic Document Viewer Integration in JavaScript (Using Node.js Package Manager)

Aug 01, 2019
3 minutes to read

You can use the HTML5 Document Viewer in JavaScript by creating two projects: a server (backend) project in an ASP.NET MVC implementation and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Note

Perform the steps in the Creating a Server Side for the Web Document Viewer topic to create a backend application.

This document describes how to install the required npm packages and create a bundle using Webpack:

Install Node.js and npm if they do not exist on your machine.
Open the console window and execute the following command to install the Webpack globally:

npm install webpack -g
Create a new folder to store all the files related to the client-side functionality (for instance, name it ClientSide).

Add the package.json configuration file to the created folder and list the following third-party packages the Web Document Viewer requires:

JSON

{
    "name": "web-document-viewer",
    "version": "1.0.0",
    "dependencies": {
        "devexpress-reporting": "latest",
        "globalize": "~1.3.0",
        "cldrjs": "~0.5.0"
    },
    "devDependencies": {
        "webpack": "~3.10.0",
        "html-loader": "~0.5.4"
    }
}

Ensure that you correctly specify the packages’ versions.

Navigate to your folder, open the console and run the command below to install packages:

npm install

You can find all the libraries in the node_modules folder after installation is completed.

Create a new webpack.config.js file and specify configuration settings as shown below. Define the index.js file as the bundle’s entry point (this file is created later) and the bundle.js file as the output file.

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        alias: {
            globalize$: path.resolve(__dirname, "node_modules/globalize/dist/globalize.js"),
            globalize: path.resolve(__dirname, "node_modules/globalize/dist/globalize"),
            cldr$: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr.js"),
            cldr: path.resolve(__dirname, "node_modules/cldrjs/dist/cldr"),
        }
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: "html-loader"
            },
            {
                test: /\.css$/,
                loader: "style-loader"
            }
        ]
    }
};

Create a View file (the index.html file in this example) and specify this View’s HTML template. At the body section, use the dxReportViewer binding with the viewerOptions parameter and link the bundle script file (bundle.js) specified at the previous step.

HTML

<!DOCTYPE html>
<html>
    <head>
         <!-- ... -->
    </head>

    <body>
        <div style="width:100%; height: 1000px" data-bind="dxReportViewer: viewerOptions"></div>
        <!-- Include the bundle script -->
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

Add a new JavaScript file (index.js) to provide the required data to the View. Link the required modules, create the viewerOptions variable and activate the Knockout bindings.

var $ = require('jquery');
var ko = require('knockout');

var documentViewerHtml = require('devexpress-reporting/dx-web-document-viewer').Html;
var div = document.createElement("div");
div.innerHTML = documentViewerHtml;
document.body.appendChild(div);

const 
    host = 'http://localhost:54114/', // URI of your backend project.
    reportUrl = ko.observable("Products");
var viewModel = {
    viewerOptions: {
        reportUrl, // The URL of a report that is opened in the Document Viewer when the application starts.
        requestOptions: { // Options for processing requests from the Web Document Viewer.  
            host, 
            invokeAction: "/WebDocumentViewer/Invoke" // The URI path of the controller action that processes requests.
        },
    }
};
ko.applyBindings(viewModel);

Create a new style.css file and link the required styles.

@import url("node_modules/jquery-ui/themes/base/all.css");
@import url("node_modules/devextreme/dist/css/dx.common.css");
@import url("node_modules/devextreme/dist/css/dx.light.css");
@import url("node_modules/devexpress-reporting/css/web-document-viewer-light.min.css");

Link this file in the index.html file’s head section.

HTML

...
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
...

Create the bundle by running the following command in the console:

webpack
Run a backend project in Visual Studio, and then, open the index.html file in your browser.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode