Reporting for React - Print and Export Without Displaying the Report

This example prints and exports a report in a browser without previewing it on a web page.

Run the Project

Run the following command from the ServerApp folder:

dotnet run

Run the following commands from the react-app folder:

npm install
mpm run dev

Open your browser and navigate to the URL specified in the command output to see the result.

Implementation Details

Export Operations

The user selects the format from the drop-down list and clicks the Export the report button to send the format to the server-side controller. The controller calls the export method for the selected format and sends the file back to the browser.

Print Operations

On the server side, a controller performs the following actions:

• Creates a report.
• Exports the report to PDF with the XtraReport.ExportToPdfAsync method.
• Sends the PDF file back to the client.

On the client side, a user can do one of the following:

• Print a report in a new tab.

  Click the Print the report in a new tab button to call the client-side window.Open(url, "_blank") method to open a new window that contains a PDF file and print the window content.

• Print a report in iFrame.

  Click the Print via iFrame button to load a PDF file in the HTMLIFrameElement and print its content.

Files to Review

• HomeComponent.jsx
• HomeController.cs

Documentation

• Reporting for React
• Export Reports

More Examples

• Reporting for Web (React) - Report Designer
• Reporting for Web (React) - Document Viewer
• How to Print and Export a Report in the ASP.NET Core Application without the Document Viewer

Does this example address your development requirements/objectives?

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