Basic Document Viewer Integration (With 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 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 configure and host the client part:
- Create a new folder to store all the files related to the client-side functionality (for instance, name it ClientSide).
Use Bower to download all the necessary client resources. Add the bower.json file to the created folder and add the following code to this file:
{ "name": "html5-document-viewer-example", "dependencies": { "xtrareportsjs": "~19.1.16" } }Note
Frontend and backend applications should use the same version of DevExpress controls.
Open the console, navigate to your application’s folder and run the following command:
bower installYou can find all the libraries in the bower_components folder after installation is completed.
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 href="~/bower_components/devextreme/css/dx.common.css" rel="stylesheet" /> <link href="~/bower_components/devextreme/css/dx.light.css" rel="stylesheet" /> <link href="~/bower_components/jquery-ui/themes/base/jquery-ui.min.css" rel="stylesheet" /> <script src="~/bower_components/jquery/dist/jquery.js"></script> <script src="~/bower_components/knockout/dist/knockout.js"></script> <script src="~/bower_components/devextreme/js/dx.all.js"></script> <script src="~/bower_components/jquery-ui/jquery-ui.js"></script> <link href="~/bower_components/xtrareportsjs/css/dx-analytics.common.min.css" rel="stylesheet" /> <link href="~/bower_components/xtrareportsjs/css/dx-analytics.light.min.css" rel="stylesheet" /> <link href="~/bower_components/xtrareportsjs/css/dx-webdocumentviewer.min.css" rel="stylesheet" /> <script src="~/bower_components/xtrareportsjs/js/dx-analytics-core.min.js"></script> <script src="~/bower_components/xtrareportsjs/js/dx-webdocumentviewer.min.js"></script> </head>Make sure that you meet all the requirements to deploy 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.
Add a JavaScript file (example.js) to provide data to the View. Create the viewerOptions variable and activate Knockout bindings.
"use strict" 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:54114/', reportUrl = ko.observable("Products"), 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, // URI of your backend project. invokeAction: invokeAction // The URI path of the controller action that processes requests. }, } ko.applyBindings({ viewerOptions });Specify this View’s HTML template in the index.html file. At the body section, use 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>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.