Document Viewer Client-Side Configuration in Angular Application

• Aug 10, 2021
• 4 minutes to read

You can use the dx-report-viewer component to integrate the Web Document Viewer into your Angular-based application.

Root Options

The following table lists the dx-report-viewer component’s options:

Option	Required / Optional	Description
reportUrl	Required	A string or Knockout observable that is the 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 the Document Viewer’s width. The default value is ‘100%’.
height	Optional	A string that defines the Document Viewer’s height. The default value is ‘700px’.
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 whether a right-to-left layout is enabled in the Document Viewer’s UI.

Nested Options

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-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. 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 provides access to all available client-side methods.

Usage

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, and creates a Print button.

app.component.html

<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-callbacks 
        (CustomizeMenuActions)="CustomizeMenuActions($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

app.component.ts

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: [
    "../../../node_modules/jquery-ui/themes/base/all.css",
    "../../../node_modules/devextreme/dist/css/dx.common.css",
    "../../../node_modules/devextreme/dist/css/dx.light.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
    "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
    "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
  ]
})
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")