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. |
Quick Start
Server
In the ServerSideApp/ServerSideApp folder, run the following command:
Codedotnet 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:
Codenpm 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
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
- 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
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Code'use client';
import ReportViewer, { RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';
function App() {
return (
<ReportViewer reportUrl="TestReport">
<RequestOptions host="http://localhost:5000/" invokeAction="DXXRDV" />
</ReportViewer>
)
}
export default App
C#using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.Logging;
using DevExpress.AspNetCore;
using DevExpress.AspNetCore.Reporting;
using DevExpress.Security.Resources;
using DevExpress.XtraReports.Web.Extensions;
using DevExpress.XtraReports.Web.WebDocumentViewer;
using Microsoft.AspNetCore.Builder;
using Microsoft.EntityFrameworkCore;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using ServerSideApp.Services;
using ServerSideApp.Data;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddDevExpressControls();
builder.Services.AddScoped<ReportStorageWebExtension, CustomReportStorageWebExtension>();
// Uncomment the following line if you run the Custom Export example.
builder.Services.AddSingleton<WebDocumentViewerOperationLogger, MyOperationLogger>();
builder.Services.AddMvc();
builder.Services.ConfigureReportingServices(configurator => {
if(builder.Environment.IsDevelopment()) {
configurator.UseDevelopmentMode();
}
configurator.ConfigureReportDesigner(designerConfigurator => {
});
configurator.ConfigureWebDocumentViewer(viewerConfigurator => {
viewerConfigurator.UseCachedReportSourceBuilder();
viewerConfigurator.RegisterConnectionProviderFactory<CustomSqlDataConnectionProviderFactory>();
});
});
builder.Services.AddDbContext<ReportDbContext>(options => options.UseSqlite(builder.Configuration.GetConnectionString("ReportsDataConnectionString")));
builder.Services.AddCors(options => {
options.AddPolicy("AllowCorsPolicy", builder => {
// Allow all ports on local host.
builder.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost");
builder.AllowAnyHeader();
builder.AllowAnyMethod();
});
});
var app = builder.Build();
using(var scope = app.Services.CreateScope()) {
var services = scope.ServiceProvider;
services.GetService<ReportDbContext>().InitializeDatabase();
}
var contentDirectoryAllowRule = DirectoryAccessRule.Allow(new DirectoryInfo(Path.Combine(builder.Environment.ContentRootPath, "Content")).FullName);
AccessSettings.ReportingSpecificResources.TrySetRules(contentDirectoryAllowRule, UrlAccessRule.Allow());
app.UseDevExpressControls();
System.Net.ServicePointManager.SecurityProtocol |= System.Net.SecurityProtocolType.Tls12;
if(app.Environment.IsDevelopment()) {
app.UseDeveloperExceptionPage();
} else {
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseCors("AllowCorsPolicy");
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
app.Run();
C#using DevExpress.AspNetCore.Reporting.WebDocumentViewer;
using DevExpress.AspNetCore.Reporting.WebDocumentViewer.Native.Services;
namespace ServerSideApp.Controllers {
public class CustomWebDocumentViewerController : WebDocumentViewerController {
public CustomWebDocumentViewerController(IWebDocumentViewerMvcControllerService controllerService) : base(controllerService) {
}
}
}