Document Viewer Integration (Node.js Package Manager)

Mar 24, 2025
5 minutes to read

In This Article

Server (Backend) Part

Use the DevExpress CLI Template

Use Visual Studio Template

Client (Frontend) Part

Troubleshooting

Page Is Blank

You can use the HTML5 Document Viewer in JavaScript based on the server-side model. Create two projects:

A server (backend) project
A client (frontend) part that includes all the necessary styles, scripts, and HTML-templates

#Server (Backend) Part

#Use the DevExpress CLI Template

You can use DevExpress CLI Templates to create an ASP.NET Core back-end application. Begin with the steps below:

Install DevExpress ASP.NET Core project templates from nuget.org:
- .NET CLI
```
dotnet new install DevExpress.AspNetCore.ProjectTemplates
```
Create a back-end Reporting application for a Document Viewer:
console
```
dotnet new dx.aspnetcore.reporting.backend -n ServerApp --add-designer false
```
You can use the following parameters to see available command options: -? | -h | --help.

Enable cross-origin requests (CORS). Specify the policy that allows any local application to access the report’s back-end. Use the SetIsOriginAllowed method to set it up.

Call the UseCors method and pass the policy name as a parameter. The UseCors method should be called after the UseRouting method and before any MVC-related code. Place the UseCors method before the UseMvc or UseEndpoints methods.

Open the application startup file and insert the following code:

Program.cs

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddCors(options => {
    options.AddPolicy("AllowCorsPolicy", builder => {
        // Allow all ports on local host.
        builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost");
        builder.AllowAnyHeader();
        builder.AllowAnyMethod();
    });
});

var app = builder.Build();

app.UseRouting();
app.UseCors("AllowCorsPolicy");

app.UseEndpoints(endpoints => {
    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");
});

app.Run();

To run the server-side application, run the following command:
console
```
cd ServerApp
dotnet run
```

#Use Visual Studio Template

To create a back-end application from a Microsoft or DevExpress Template in Visual Studio, review the following help topics:

#Client (Frontend) Part

The following steps describe how to configure and host the client part:

Install Node.js and npm if they do not exist on your machine.
Install the Webpack CLI globally with the following commands:
console
```
npm install -g webpack
npm install -g webpack-cli
```
Create a folder for a client-side project. In this example, the folder’s name is ClientSide.

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

package.json

{
    "name": "web-document-viewer",
    "version": "1.0.0",
    "dependencies": {
        "devextreme-dist": "24.2-stable",
        "@devexpress/analytics-core": "24.2-stable",
        "devexpress-reporting": "24.2-stable",
        "mini-css-extract-plugin": "^2.9.1",
        "css-loader": "^7.1.2"
    },
    "devDependencies": {
        "html-loader": "~0.5.4",
        "webpack": "^5.0.0"
    }
}

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:
console
```
npm install
```

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

webpack.config.js

var path = require('path');
var webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    mode: "development",
    module: {
        rules: [
            {
                test: /\.html$/,
                loader: "html-loader" 
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    'css-loader'    // Interprets `@import` and `url()` like `import/require()` and resolves them.
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.css' // Output CSS file name.
        })
    ]
};

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

index.html

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

    <body>
        <div style="width:100%; height: 1000px" id="viewer"></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 modules, create the viewerOptions variable, and activate the Knockout bindings.

index.js

var ko = require('knockout');
import { DxReportViewer } from 'devexpress-reporting/dx-webdocumentviewer'

require('./style.css');

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 = 'http://localhost:5000/', // URI of your backend project.
    reportUrl = ko.observable("TestReport");
    var 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);
new DxReportViewer(document.getElementById("viewer"), viewerOptions).render();

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

style.css

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

index.html

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

create the bundle with the following command:
console
```
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, run the backend project followed by the client part.

#Troubleshooting

You may encounter the following issues:

#Page Is Blank

The Document Viewer page is blank. The following error message is displayed at the bottom of the page:

Could not open report ‘TestReport’

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 is compliant with the CORS policy specified in your back-end application.
The reportUrl setting value matches an existing report. For the backend application, ensure that either the Reports folder contains a reportUrl.repx file or the ReportsFactory.Reports dictionary contains the reportUrl entry (if the back-end application originated from the DevExpress template).
The version of DevExpress npm packages should match the version of NuGet packages. Enable Development Mode to check for a library version mismatch on every request to the server. For details, review the following help topic: Server-Side Libraries Version.

Refer to the following topic for more information: Troubleshooting.

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Controls

FREE UTILITIES

Controls and Extensions

FREE UTILITIES

Document Viewer Integration (Node.js Package Manager)

#Server (Backend) Part

#Use the DevExpress CLI Template

#Use Visual Studio Template

#Client (Frontend) Part

#Troubleshooting

#Page Is Blank