Document Viewer Client-Side Configuration in an Angular Application

• May 23, 2024
• 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 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.

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-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 dxrv-callbacks for the Viewer, and dxrd-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.

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, disables asynchronous search, 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-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>

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: [
    // ...
  ]
})
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")