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.
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. |
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.
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.
- Create a React Application with Web Document Viewer
- Document Viewer Server-Side Configuration (ASP.NET Core)
- Reporting for React - Integrate Report Designer in React App
- Reporting for React - Integrate Web Document Viewer in React App
- Reporting for React - Customize Parameter Editor in the Web Document Viewer
- Reporting for React - Customize Viewer Toolbar
(you will be redirected to DevExpress.com to submit your response)