A control that is used to publish (preview, print and export) documents in ASP.NET applications and supports HTML5/JS technology.
public class ASPxWebDocumentViewer : ASPxWebClientUIControl, IControlDesigner
Public Class ASPxWebDocumentViewer Inherits ASPxWebClientUIControl Implements IControlDesigner
The HTML5 Document Viewer includes the following main features:
- Asynchronous document building;
- Pixel-perfect document rendering;
- The multi-page mode enabling you to display an entire document at once;
- A flexible client-side customization mechanism;
- An application's modern look and feel;
- Support for in-place content editing;
- Support for the Mobile Mode adapted for use on phones and tablets.
To add a Web Document Viewer to your application, do the following:
- In Visual Studio, expand the DX.20.2: Reporting Toolbox tab and drop the ASPxWebDocumentViewer control onto the page.
- Assign a report to the Viewer using the corresponding option in the control's smart tag (or call the ASPxWebDocumentViewer.OpenReport or ASPxWebDocumentViewer.OpenReportXmlLayout method).
In the application's Web.config file, add the "resources" section as shown below.
<devExpress> <!-- ... --> <resources> <add type="ThirdParty" /> <add type="DevExtreme" /> </resources> </devExpress>
Alternatively, to avoid automatic loading of any libraries by a control (e.g., when such libraries are already referenced on the web page), declare an empty "resources" section and manually attach DevExtreme resources and the required third-party libraries to the web page.
Deleting the DevExpress "resources" section from the Web.config file will enable the default behavior (with automatic loading only of DevExtreme, without adding third-party libraries).
To learn more about this configuration, see Embedding Third-Party Libraries.
To use the Document Viewer on mobile devices, enable the ASPxWebDocumentViewer.MobileMode property.
For the Mobile Viewer to properly render document pages in a mobile browser, include the viewport <meta> tag to your HTML file inside the <head> block as shown below.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
To learn more about this mode, see Mobile Mode.
- Run your application and view the result.
To learn more about using the Web Document Viewer, refer to the following topics: