xtrareports-400292-web-reporting-angular-reporting-document-viewer-document-viewer-client-side-configuration-angular.md
You can use the dx-report-viewer component to integrate the Web Document Viewer into your Angular-based application.
The following table lists dx-report-viewer component options:
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
reportUrl
|
Required
|
A string identifier used by server-side report name resolution services to instantiate a report. For more information, review the following help topic: Open a Report in ASP.NET Core Application.
| |
width
|
Optional
|
A string that defines Document Viewer width. The default value is ‘100%’.
| |
height
|
Optional
|
A string that defines Document Viewer height. The default value is ‘700px’.
| |
developmentMode
|
Optional
|
A boolean value that enables Development mode for extended diagnostics. Review the following help topic for more information: Trooubleshooting: Server-Side Libraries Version.
| |
cssClass
|
Optional
|
A string that specifies the CSS class name to attach to the root div element.
| |
isMobile
|
Optional
|
A boolean value that specifies whether to configure the Document Viewer for mobile devices. Refer to the following topic for more information: Mobile Mode.
| |
rtl
|
Optional
|
A boolean value that specifies if a right-to-left layout is enabled in the Document Viewer’s UI.
|
dxrv-request-options - A nested component that allows you to specify where to send requests from the Document Viewer.
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
host
|
Required
|
A server-side project’s URI.
| |
invokeAction
|
Required
|
The URI path of the controller action that processes requests.
| |
getLocalizationAction
|
Optional
|
The URI path of the controller action used to customize localization strings.
|
dxrv-remote-settings - A nested component that configures the Web Document Viewer to display documents that are created remotely with the DevExpress Report and Dashboard Server.
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
serverUri
|
Required
|
Specifies the Report and Dashboard Server URI.
| |
authToken
|
Required
|
Specifies the Bearer token to access documents on the DevExpress Report and Dashboard Server.
|
dxrv-mobile-mode-settings - A nested component that provides options for the Web Document Viewer’s mobile mode (if the root isMobile option is enabled).
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
readerMode
|
Optional
|
Specifies whether to enable a reader mode that displays document pages without page borders.
| |
animationEnabled
|
Optional
|
Specifies whether actions are animated.
|
dxrv-tabpanel-settings - A nested component that allows you to customize the Document Viewer’s tab panel.
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
position
|
Optional
|
Specifies the tab panel’s position (“Left” or “Right”).
| |
width
|
Optional
|
Specifies the tab panel’s width.
|
dxrv-export-settings - A nested component that applies Web Document Viewer print and export settings.
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
useSameTab
|
Optional
|
Specifies if the print and export operations are performed in the same browser tab as the Document Viewer control.
| |
showPrintNotificationDialog
|
Optional
|
Specifies whether to display an additional dialog that allows users to download the PDF file sent to printing.
| |
useAsynchronousExport
|
Optional
|
Allows you to export documents asynchronously.
|
dxrv-search-settings - A nested component that allows you to specify Document Viewer search settings.
|
Option
|
Required / Optional
|
Description
| | --- | --- | --- | |
searchEnabled
|
Optional
|
Allows you to hide search actions.
| |
useAsyncSearch
|
Optional
|
Specifies whether the Document Viewer uses asynchronous search.
|
dxrv-callbacks - A nested component that provides callbacks to customize the Document Viewer. These callbacks correspond to client-side events at the Document Viewer control level.
Tip
The tag name is dxr v -callbacks for the Viewer, and dxr d -callbacks for the Designer.
<dx-report-viewer [reportUrl]="reportUrl" height="800px">
<dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
<dxrv-callbacks (ParametersInitialized)="OnParametersInitialized($event)"></dxrv-callbacks>
</dx-report-viewer>
For a list of available events and details on how to use each event, refer to the following help topic: Document Viewer Client-Side API.
Note
The Document Viewer passes one argument (the $event object) to callback handlers. This argument contains sender and args properties.
The sender object is the Document Viewer’s JavaScript equivalent. It allows you to use all available client-side methods.
The following code demonstrates how to use the dx-report-viewer component in a View. The code hides the Print and PrintPage commands in the toolbar, disables asynchronous search, and creates a Print button.
<div>
<button (click)="print()"><span>Print</span></button>
</div>
<div>
<dx-report-viewer [reportUrl]="reportUrl" height="800px" cssClass='myViewer'>
<dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
<dxrv-tabpanel-settings width="500" position="Left"></dxrv-tabpanel-settings>
<dxrv-export-settings [useSameTab]="false" [useAsynchronousExport]="false"></dxrv-export-settings>
<dxrv-search-settings [useAsyncSearch]="false"></dxrv-search-settings>
<dxrv-callbacks
(CustomizeMenuActions)="CustomizeMenuActions($event)">
</dxrv-callbacks>
</dx-report-viewer>
</div>
import { ActionId } from 'devexpress-reporting/dx-webdocumentviewer'
import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';
@Component({
selector: 'report-viewer',
encapsulation: ViewEncapsulation.None,
templateUrl: './report-viewer.html',
styleUrls: [
// ...
]
})
export class ReportViewerComponent {
@ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
reportUrl: string = "TestReport";
// The built-in controller in the back-end ASP.NET Core Reporting application.
invokeAction: string = '/DXXRDV';
CustomizeMenuActions(event) {
// Hide the "Print" and "PrintPage" actions.
var printAction = event.args.GetById(ActionId.Print);
if (printAction)
printAction.visible = false;
var printPageAction = event.args.GetById(ActionId.PrintPage);
if (printPageAction)
printPageAction.visible = false;
}
print() {
this.viewer.bindingSender.Print();
}
constructor(@Inject('BASE_URL') public hostUrl: string) { }
}
Run the application to see the results - as shown below:
Tip
To access the client-side model, use the bindingSender property:
this.viewer.bindingSender.OpenReport("reportName")
See Also