As you may already know, DevExpress Reports is designed as a cross-platform reporting solution. This means you can create a report once and then display, print, and export your document to any supported .NET platform. The user experience extends to all hosting environments/operating systems where your application is deployed.
Thanks to our transition to a Skia-based drawing engine (DevExpress.Drawing graphics library), we were able to modify our Native Blazor Report Viewer implementation so that it now supports the Blazor WebAssembly (WASM) hosting model. The Report Viewer allows you to display, print, and export simple reports, and bind reports to JSON and Object data sources.
Additionally, our cross-platform drawing engine allows you to use DevExpress Reports and Blazor Report Viewer component within .NET MAUI Blazor apps. Please refer to the following blog post for additional information in this regard: DevExpress Reporting and .NET MAUI — Generate and Export Report Documents in macOS, Android and iOS (v23.1)
WebAssembly Key Benefits
The primary benefit of Blazor WebAssembly hosting model support is that you can now preview, print, and export reports within your browser, without an ASP.NET Core backend.
The Blazor WebAssembly hosting model allows you to execute client-side C# code directly in your browser. This means that the application, its dependencies, and the .NET runtime are downloaded to your browser. Your app can also run offline — once all the necessary resources are downloaded.
Our Blazor Report Viewer is a .NET component implemented using C#. As such, you do not need to deal with JavaScript code to customize component behavior. Additionally, the Blazor Report Viewer ensures UI consistency and supports all DevExpress Blazor themes.
Ahead-of-Time (AOT) Compilation
With v23.1 and all future releases, DevExpress Reports for Blazor WebAssembly ship with built-in Ahead-of-Time (AOT) compilation support. AOT compilation "precompiles" C# code into machine code before it is executed by the browser. This technique is particularly useful in Blazor WASM because it allows C# code to be executed directly by the browser's WebAssembly engine and leads to significant enhancements in runtime performance.
The chart below illustrates the performance difference with and without AOT enabled. We measured performance on our Invoice Demo report.
Please note that the AOT-compiled app size is large and thus apps take longer to download to the client after first requested.
Create a Reporting Application for Blazor WebAssembly
In this section, I’ll describe how to integrate our Blazor Report Viewer in a Blazor WebAssembly application and display a simple tabular report.
Create a Project
You can use DevExpress Visual Studio templates, Microsoft Visual Studio templates, or a command-line interface (CLI) to create a reporting application. Please refer to the following step-by-step tutorials for more information on each strategy:
- Use Visual Studio Project Templates to Create a Blazor Reporting Application
- Use .NET CLI to Create a Blazor Reporting Application from a Template
- Create Blazor Report Viewer Application from Microsoft Template
Add NuGet Packages
All three strategies require the following NuGet packages:
- DevExpress.Drawing.Skia
- SkiaSharp.Views.Blazor
- SkiaSharp.NativeAssets.WebAssembly
- SkiaSharp.HarfBuzz
- HarfBuzzSharp.NativeAssets.WebAssembly
- DevExpress.Blazor
- DevExpress.Blazor.Reporting.Viewer
Register Fonts
Before the application can run in a browser, register fonts to ensure that the Skia drawing engine can use them to draw report content.
The DXFontRepository class allows you to register required fonts as follows:
public async static Task LoadFonts(HttpClient httpClient, List<string> fontNames) {
foreach (var fontName in fontNames) {
var fontBytes = await httpClient.GetByteArrayAsync($"fonts/{fontName}");
DXFontRepository.Instance.AddFont(fontBytes);
}
}Your Feedback Matters
If you encounter issues while using DevExpress Reports within Blazor WebAssembly apps, feel free to submit a ticket using the DevExpress Support Center.
Also, please complete the short survey below to give us an understanding of how you are going to use DevExpress Reporting tools in your next Blazor WebAssembly app:
What's New in v23.1
If you have yet to review the features/capabilities introduced in our most recent major update, please visit the following webpage and let us know what you think of this release by responding to our online survey: Explore Our Newest Features (v23.1