xtrareports-404982-web-reporting-react-reporting-document-viewer-document-viewer-client-side-configuration-react.md
Use the ReportViewer component to integrate the Web Document Viewer into your React-based application.
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
|
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.
The following code configures the ReportViewer component in a React application. The code does the following:
CustomizeMenuActions event to hide the Print and Print Page commands from the toolbar.'use client';
import ReportViewer, { RequestOptions, Callbacks, TabPanelSettings, ExportSettings, SearchSettings} from 'devexpress-reporting-react/dx-report-viewer';
import { ActionId } from 'devexpress-reporting/dx-webdocumentviewer'
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: