Microsoft has long introduced a framework for creating an interactive web interface with C#, HTML and CSS. It comes in two versions: Server-side (Blazor Server) and Client-side (Blazor WebAssembly). WebAssembly is particular because it is executed right in the user’s browser and accesses the remote server only for the libraries required for code execution.
FastReport .NET already supports Blazor technology as part of the FastReport.Web package (more). However, until now, we have only supported Server-side rendering (Blazor Server). It took us a long time to get FastReport .NET working right in the user’s browser because we needed Skia support for stable work. Starting with version 2023.2, we are pleased to announce Blazor WebAssembly support as part of the FastReport.Blazor.Wasm package. This package is available as part of a FastReport .NET Enterprise subscription and higher (including Ultimate).
Attention! Blazor WebAssembly support is currently in beta. Some reports and functionality may not work. Read the documentation and restrictions carefully before using.
Creating a demo application
Let’s create a test demo application to see the work of FastReport in WebAssembly.
First, install WebAssembly Build Tools to build your project with WebAssembly. If it is not installed, then run the following commands on the command line, depending on the TargetFramework of your application:
For .NET 6:
For .NET 7:
Now let’s create a simple Blazor WebAssembly demo project from a template. You can do this using Microsoft Visual Studio 2022 or the dotnet CLI. For simplicity, let’s use the command:
Let’s edit the csproj of our project and add the latest FastReport.Blazor.Wasm package:
Now, if you want to prepare your report in the browser (.frx), you must disable Trimming, as it interferes with the report script compilation. You can do this in the following way:
Now we add the native SkiaSharp libraries as part of our application. Depending on the TargetFramework we need to add:
For .NET 6:
For .NET 7:
In the _Imports.razor file, similarly to the Blazor Server components, add the necessary namespace to view the FastReport components:
Register FastReport services in our DI container (file Program.cs):
Note that for FastReport to work in WebAssembly, you must have a configured HttpClient in a DI container that can access root to load the necessary dlls builds. If you need to override HttpClient for your use, you can just set a separate HttpClient only for FastReport needs:
We have almost completed our long journey of preparing FastReport in WebAssembly, but there are just a few finishing touches. In the standard wwwroot\index.html file, we need to add the loading of js scripts for the proper work of FastReport:
FastReport must interact with the user’s fonts since FastReport works with reports and the font is an integral part of any report with text. This is what happens when the report generator runs on Windows or Linux. However, the information about installed fonts on the user’s computer becomes unavailable when FastReport runs in a browser. Thus, our application must register the fonts that we will use in our reports. In our application, we will use a font that we will embed in our library as an embedded resource (EmbeddedResource) in advance. For this, specify in our project (.csproj):
Let’s put all the fonts we need in the Fonts folder and register them in our Program.cs. Let’s create this method and call it immediately:
That’s quite difficult. Few database connectors can work directly from the user’s browser. Therefore, we leave this to the discretion of our users. For example, you can request data from some third-party resource via HTTP and then register this data in a report before preparing it. In our application, for demonstration, we use the data from the xml file, which we put in wwwroot together with the report.
Attention! Do not use this method for the final project publication because hackers can easily steal your data.
Using WebReportContainer component
Finally, let’s change the file Index.razor to use our WebReportContainer component. It will require the following code:
Everything went well if we saw our report in the browser:
We would like to remind that Blazor WebAssembly support is currently in beta mode. You have access to the reporting engine, you can build reports and view ready-made. Online designer support will be added in future. For security reasons, database connections are disabled inside reports, you will need to connect data from your application yourself. We are working hard on improving our WebAssembly component. If you have any questions, write to our support at firstname.lastname@example.org.