Document Viewer Requirements and Limitations

Aug 03, 2020
4 minutes to read

Document Viewer Requirements

Required Libraries

The Web Document Viewer requires the following libraries:

Third-party Libraries
- jQuery 3.4.1+ (The recommended version is jQuery 3.5.1+.)
- jQuery UI (the minimum version is 1.12.1)
- knockout 3.5.0+
DevExtreme Libraries

DevExtreme libraries are used to render UI elements in Web reporting components.

To include these script libraries in a client application, do one of the following:

Automatic Integration

Add the resources section to the application’s Web.config file to include client-side libraries on the web page:
- XML
```
<devExpress>
    
    <resources>
        <add type="ThirdParty" />
        <add type="DevExtreme" />
    </resources>
</devExpress>
```
The DevExpress Analytics Components library is attached automatically.

Manual Integration

Follow the setps below:

Declare an empty resources section in the Web.config file. This prevents a control from loading libraries automatically when libraries are already referenced on the web page.
- XML
```
<resources>
</resources>
```
If you remove the DevExpress resources section from the Web.config file, the DevExtreme libraries are loaded automatically. For more information, review the following help topic: Embed Third-Party Libraries.

Add the package.json npm configuration file with the following contents:

package.json

{
    "version": "1.0.0",
    "name": "asp.net",
    "private": true,
    "dependencies": {
        "devextreme": "20.2.*",
        "@devexpress/analytics-core": "20.2.*",
        "devexpress-reporting": "20.2.*",
        "globalize": "^1.3.0",
        "jquery-ui-dist": "^1.12.1"
    }
}

Right-click package.json in the Solution Explorer and select Restore Packages. Alternatively, you can execute the following comand in the folder that contains the package.json file:
```
npm install
```

Attach the following scripts and stylesheets to the <head> section of the page:

HTML

<html>
<head>
...
<link href="node_modules/jquery-ui-dist/jquery-ui.min.css" type="text/css" rel="Stylesheet" />
<link href="node_modules/devextreme/dist/css/dx.common.css" type="text/css" rel="Stylesheet" />
<link href="node_modules/devextreme/dist/css/dx.light.css" type="text/css" rel="Stylesheet" />
<link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css" type="text/css" rel="Stylesheet" />
<link href="node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css" type="text/css" rel="Stylesheet" />
<link href="node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css" type="text/css" rel="Stylesheet" />

<script src="node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="node_modules/jquery-ui-dist/jquery-ui.min.js" type="text/javascript"></script>
<script src="node_modules/knockout/build/output/knockout-latest.js" type="text/javascript"></script>
<script src="node_modules/cldrjs/dist/cldr.js" type="text/javascript"></script>
<script src="node_modules/cldrjs/dist/cldr/event.js" type="text/javascript"></script>
<script src="node_modules/cldrjs/dist/cldr/supplemental.js" type="text/javascript"></script>
<script src="node_modules/cldrjs/dist/cldr/unresolved.js" type="text/javascript"></script>
<script src="node_modules/globalize/dist/globalize.js" type="text/javascript"></script>
<script src="node_modules/globalize/dist/globalize/message.js" type="text/javascript"></script>
<script src="node_modules/globalize/dist/globalize/number.js" type="text/javascript"></script>
<script src="node_modules/globalize/dist/globalize/currency.js" type="text/javascript"></script>
<script src="node_modules/globalize/dist/globalize/date.js" type="text/javascript"></script>

<script src="node_modules/devextreme/dist/js/dx.all.js" type="text/javascript"></script>

<script src="node_modules/ace-builds/src-min-noconflict/ace.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/ext-language_tools.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/theme-ambiance.js" type="text/javascript"></script>
<script src="node_modules/ace-builds/src-min-noconflict/snippets/text.js" type="text/javascript"></script>

<script src="node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js" type="text/javascript"></script>
<script src="node_modules/devexpress-reporting/dist/js/dx-webdocumentviewer.min.js" type="text/javascript"></script>
...
</head>
...
</html>

The load order is important.

For a list of supported web browsers, refer to the following help topic: Supported Browsers.

Register HTTP Handlers

Register ASPxHttpHandlerModule (DXXRDV.axd) in the web.config file as a module to process resources and as a handler to process data.

The ASPxHttpHandlerModule is automatically registered in this file in the following cases:

When you use DevExpress project templates to create an application with reporting controls;
When you use the Insert DevExpress MVC Extension Wizard to add MVC reporting extensions.

If you create the Document Viewer in code, you should register ASPxHttpHandlerModule explicitly. Insert the declarations in the system.web/httpModules and system.webServer/modules configuration sections, and add the handler registration to the system.web/httpHandlers and system.webServer/handlers sections.

<system.web>
...
  <httpHandlers>
    ...
    <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v20.2, Version=20.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
         verb="GET,POST" path="DXXRDV.axd" validate="false" />
  </httpHandlers>  
  <httpModules>
    <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v20.2, Version=20.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule" />
  </httpModules>
</system.web>
<system.webServer>
  <handlers>
    ...
    <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v20.2, Version=20.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" 
         verb="GET,POST" path="DXXRDV.axd" name="ASPxWebDocumentViewerHandlerModule" preCondition="integratedMode" />
  </handlers>
  <modules runAllManagedModulesForAllRequests="true">
    <add type="DevExpress.Web.ASPxHttpHandlerModule, DevExpress.Web.v20.2, Version=20.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" name="ASPxHttpHandlerModule" />
  </modules>
</system.webServer>

The Document Viewer validates the configuration and displays the following error message if the handler is not registered.

“The DXXRDV.axd handler is not registered in the web.config (section: system.webServer/handlers). To disable web.config validation, use the DevExpress.Web.Mvc.WebDocumentViewerSettings.DisableHttpHandlerValidation property.“

Do not use handlers and/or validate their registration in the following cases:

You use custom HTTP handlers or MVC controllers to process requests.
Handlers are registered in the <location> section, and automatic validation fails.

To disable automatic handler validation, set the WebDocumentViewerSettings.DisableHttpHandlerValidation option to true:

C#
VB.NET

@Html.DevExpress().WebDocumentViewer(settings => {
    settings.Name = "WebDocumentViewer";
    settings.DisableHttpHandlerValidation = true;
}).Bind(Model.Report).GetHtml();

@Html.DevExpress().WebDocumentViewer(Function(settings) 
    settings.Name = "WebDocumentViewer"
    settings.DisableHttpHandlerValidation = True
End Function).Bind(Model.Report).GetHtml()

Document Viewer Limitations

The following document formats do not support export to multiple files:
- HTML;
- Image;
- XLS;
- XLSX.
You can export a report to any of these formats as a single file or as a single file page-by-page (one file that contains multiple pages).
The Document Viewer prints a report by converting it to PDF and printing the PDF. This approach requires browser support for PDF.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode