Reporting for React - Add a Web Document Viewer to a React App

This example incorporates the Web Document Viewer into a client-side app built with React. The example consists of two parts:

• The ServerSideApp folder contains the backend project. The project is an ASP.NET Core application that enables cross-domain requests (CORS) (Access-Control-Allow-Origin) and implements custom web report storage.

• The react-document-viewer folder contains the client application built with React.

Quick Start

Server

In the ServerSideApp/ServerSideApp folder, run the following command:

dotnet run

The server starts at http://localhost:5000. To debug the server, run the application in Visual Studio.

Client

In the react-document-viewer folder, run the following commands:

npm install
npm run dev

Open http://localhost:3000/ in your browser to view the result. The application displays the Web Document Viewer with the TestReport report.

Files to Review

• page.tsx
• Program.cs
• ReportingControllers.cs

Documentation

• Create a React Application with Web Document Viewer
• Document Viewer Server-Side Configuration (ASP.NET Core)

More Examples

• Reporting for React - Integrate Report Designer in React App

Customization Examples

This project contains code snippets used for client-side customization and reflected in our online help topics. Each code snippet is enclosed in a page.tsx file in a separate folder. After running the project, open the following folders to see the result:

Location	Description
/custom-export-to-button	Hides the Export Options panel, adds a button to export the report to a file in XLSX format, and specifies the Author export option.
/custom-parameter-lookup-source	Populates parameter editors with values obtained on the client.
/customize-export-options	Specifies the "|" symbol as a separator for CSV data export, hides specified export options.
/customize-export-toolbar-item	Adds a new Image: JPEG item in the Export drop-down menu and binds it to the ExportTo action.
/customize-parameter-editor-options	Removes time part from a calendar editor in the Parameters panel.
/export-options-hide-format	Removes the XLS format from the Export To drop-down list and from the Export Options panel.
/get-parameters-model	Obtains values that the user selects in the multi-value parameter editor.
/get-preview-model	Collapses the tab panel when the user clicks Reset in the Parameters tab.
/get-report-preview	Sets the report preview's zoom level to 25%.
/goto-next-page	Automatically navigates through the document pages.
/on-server-error	Logs error details and displays an alert box when a server error occurs.
/open-report	Loads the specified report.
/parameters-events	Handles report parameter events.
/predefined-date-ranges	Removes built-in predefined ranges in the DateTime editor and adds two custom predefined ranges.
/print-document	Creates a button that prints the Document Viewer's report.
/property-changes-processing	Sets the zoom level to 25%, enables multi-page mode, and indicates the moment when the first page is loaded.
/submit-parameters	Passes a parameter to the report and rebuilds the document.

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)