Document Viewer Client-Side Configuration in React Applications

• Jun 05, 2024
• 4 minutes to read

Use the ReportViewer component to integrate the Web Document Viewer into your React-based application.

Root Options

The following table lists ReportViewer 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

RequestOptions

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.

RemoteSettings

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.

MobileModeSettings

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.

TabPanelSettings

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.

ExportSettings

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.

SearchSettings

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.

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.

Usage

The following code configures the ReportViewer component in a React application. The code does the following:

• Uses the CustomizeMenuActions event to hide the Print and Print Page commands from the toolbar.
• Sets the tab panel’s width to 500px and moves it to the left side.
• Disables asynchronous export and opens another browser tab for print and export operations.
• Hides search actions from the Toolbar and Tab Panel.

'use client';
import ReportViewer, { RequestOptions, Callbacks, TabPanelSettings, ExportSettings, SearchSettings} from 'devexpress-reporting-react/dx-report-viewer';
import { ActionId } from 'devexpress-reporting/dx-webdocumentviewer'

import 'devextreme/dist/css/dx.light.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.common.css';
import '@devexpress/analytics-core/dist/css/dx-analytics.light.css';
import 'devexpress-reporting/dist/css/dx-webdocumentviewer.css';

function App() {
  const onCustomizeMenuActions = ({ args }: { args: any }): void => {
    // Hide the "Print" and "PrintPage" actions. 
    var printAction = args.GetById(ActionId.Print);
    if (printAction)
        printAction.visible = false;
    var printPageAction = args.GetById(ActionId.PrintPage);
    if (printPageAction)
        printPageAction.visible = false;
    }
  return (
    <ReportViewer reportUrl="TestReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
      <TabPanelSettings width={500} position='Left'/>
      <ExportSettings useSameTab={false} useAsynchronousExport={false}/>
      <SearchSettings searchEnabled={false}/>
      <Callbacks CustomizeMenuActions={onCustomizeMenuActions} />
    </ReportViewer>        
  )
}

export default App

The image below shows the resulting Web Document Viewer: