Document Viewer Integration (Node.js Package Manager)

Jan 06, 2024
5 minutes to read

You can use the HTML5 Document Viewer in JavaScript based on the server-side model. You should create two projects: a server (backend) project and a client (frontend) part that includes all the necessary styles, scripts, and HTML-templates.

Important

Perform the steps from one of the following topics to prepare a backend application:

This document describes how to create the client part, install the npm packages and create a bundle with Webpack:

Install Node.js and npm if they do not exist on your machine.
Open the console window and execute the following commands to install the Webpack CLI globally:
```
npm install -g webpack

npm install -g webpack-cli
```
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": {
        "devextreme": "24.1.*",
        "@devexpress/analytics-core": "24.1.*",
        "devexpress-reporting": "24.1.*"
    },
    "devDependencies": {
        "webpack": "~4.10.1",
        "html-loader": "~0.5.4"
    }
}

Note

Frontend and backend applications should use the same version of DevExpress controls.

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'
    },
    mode: "development",
    module: {
        rules: [
            {
                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="dist/bundle.js" charset="utf-8"></script>
    </body>
</html>

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

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

require('devexpress-reporting/dx-webdocumentviewer')

const 
    // Use this line if you use an ASP.NET MVC backend
    invokeAction = "/WebDocumentViewer/Invoke"
    // Uncomment this line if you use an ASP.NET Core backend
    //invokeAction = "DXXRDV"

    host = 'https://localhost:54114/', // URI of your backend project.
    reportUrl = ko.observable("Products");
    var viewModel = {
        viewerOptions: {
            reportUrl: 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: host, 
                invokeAction: invokeAction // 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/devextreme/dist/css/dx.light.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");

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

HTML

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

Run the following command in the console to create the bundle:
```
webpack
```
Host your client-side part on the web server.

For instance, start the Internet Information Services (IIS) Manager, right-click the Sites item in the Connections section and select Add Website. In the invoked dialog, specify the site name, path to the folder with the client-side functionality, and the website’s IP address.
For the example to work correctly, you should first run a backend project in Visual Studio, and then, run a client part.

Troubleshooting

When you start the application, you may encounter the following problems:

Page is blank

The Document Viewer page is blank. The following error message is displayed at the bottom of the page: The page is blank because the Document Viewer failed to load the report. Consult the developer for assistance. Use development mode for detailed information. If the page does not display the Document Viewer, press F12 to invoke DevTools and inspect the console messages.

Check the following:

The backend application is up and running.
The backend application runs on the port specified in the host setting of the Document Viewer component.
The application’s URI satisfies the CORS policy specified in your backend application.
The reportName value matches an existing report. For the backend application it means that the Reports folder contains the reportName.repx file or the ReportsFactory.Reports dictionary contains the reportName entry (if backend application originated from the DevExpress template).
The version of the DevExpress scripts (npm packages) should match the version of the server-side libraries (NuGet packages). You can enable Development Mode to check for library version mismatch on every request to the server. For more information, review the following help topic: Server-Side Libraries Version.

Review the following help topic for more information: Troubleshooting.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Troubleshooting

Page is blank