Skip to main content

Document Viewer Client-Side Configuration in Angular Application

  • 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-export-settings - A nested component that applies Web Document Viewer print and export settings.

Option

Required / Optional

Description

useSameTab

Optional

Specifies whether the print and export operations are performed in the same browser tab with 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-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.

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

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")