Skip to main content
BuyLog In
.NET Reporting Tools
Search in…
Docs > Reporting > Creating End-User Reporting Applications > Web Reporting > Using Reporting Controls in JS > Basic Document Viewer Integration in JavaScript (Using Bower)
A newer version of this page is available.
All docs
V17.2
Reporting
Product Information
Creating Reports in Visual Studio
Creating End-User Reporting Applications
Localization
Redistribution and Deployment
Cross-Platform Reporting
WinForms Reporting
WPF Reporting
Web Reporting
Web Reporting Overview
Document Viewer
Report Designer
Using Reporting Controls in JS
Creating a Server Side for the Web Document Viewer
Creating a Server Side for the Report Designer
Reporting Knockout Bindings
Basic Document Viewer Integration in JavaScript (Using Bower)
Basic Document Viewer Integration in JavaScript (Using Node.js Package Manager)
Basic Report Designer Integration in JavaScript (Using Bower)
Basic Report Designer Integration in JavaScript (Using Node.js Package Manager)
Document Viewer Integration into a DevExtreme application
Report Designer Integration into a DevExtreme application
Document Viewer Integration in ReactJS
Report Designer Integration in ReactJS
Document Viewer Integration in Angular2
Report Designer Integration in Angular2
Application Security
Application Appearance
Application Deployment
Localization
End-User Documentation
WCF Report Service
Discontinued Platforms
API Reference

Basic Document Viewer Integration in JavaScript (Using Bower)

  • 3 minutes to read

Tip

Online Example: How to use the Web Document Viewer in JavaScript

You can use the HTML5 Document Viewer in JavaScript by creating two projects: a server (backend) project in 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 configure and host the client part:

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

  2. Download all the necessary client resources using Bower. Add the bower.json file to the created folder and add the following code to this file:

    {
    "name": "html5-document-viewer-example",
    "dependencies": {
      "xtrareportsjs": "~17.2.3"
    }
}

    Ensure that you correctly specify the reporting controls’ version.

  3. Open the console, navigate to your application’s folder and run the following command:

    bower install

    After installation is completed, you can find all the libraries in the bower_components folder.

  4. Create a View file in the root folder (the index.html file in this example) and link the Bower resources in the head section.

    <head>
    <title></title>
    <link rel="stylesheet" href="bower_components/devextreme/css/dx.common.css" />
    <link rel="stylesheet" href="bower_components/devextreme/css/dx.light.css" />
    <link href="bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="bower_components/knockout/dist/knockout.js"></script>
    <script type="text/javascript" src="bower_components/devextreme/js/dx.all.js"></script>
    <script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.js"></script>

    <link href="bower_components/xtrareportsjs/css/web-document-viewer-light.css" rel="stylesheet" />
    <script type="text/html" src="bower_components/xtrareportsjs/html/web-document-viewer.html"></script>
    <script type="text/javascript" src="bower_components/xtrareportsjs/js/dx-designer.js"></script>
    <script type="text/javascript" src="bower_components/xtrareportsjs/js/web-document-viewer.js"></script>
    <script type="text/javascript" src="bower_components/xtrareportsjs/js/localization/web-document-viewer.en.js"></script>
</head>

    Make sure that you meet all the requirements for deploying the control on the client. Refer to Document Viewer Requirements and Limitations for a list of necessary client resources.

    Note that this sample uses a script with a predefined localization dictionary.

  5. Add a JavaScript file (example.js) to provide the required data to the View. Create the viewerOptions variable and activate Knockout bindings.

    "use strict"

const host = 'http://localhost:54114/',
    reportUrl = ko.observable("Products"),
    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, // URI of your backend project.
            invokeAction: "/WebDocumentViewer/Invoke" // The URI path of the controller action that processes requests. 
        },
    }

ko.applyBindings({ viewerOptions });

  6. In the index.html file, specify this View’s HTML template at the body section using the dxReportViewer binding with the viewerOptions parameter.

    ...
<body>
    <div style="width:100%; height: 1000px" data-bind="dxReportViewer: viewerOptions" ></div>
    <script type="text/javascript" src="example.js"></script>
</body>

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

    host-javascript-example-in-iis

  8. For the example to work correctly, you should first run a backend project in Visual Studio, and then, run a client part.
See Also