The Future of Report Generation with Blazor WebAssembly

This update was published by our partner Fast Reports. To view the original article, please click here.

Microsoft has a framework for creating interactive web interfaces with C#, HTML, and CSS that comes in two versions: Blazor Server and Blazor WebAssembly. Blazor WebAssembly is unique because it executes directly in the user’s browser and only accesses the remote server for required libraries. FastReport .NET supports Blazor technology as part of the FastReport.Web package, but until now, it only supported server-side rendering.

With Fast Report New Release of Version 2023.2, they now offer Blazor WebAssembly support as part of the FastReport.Blazor.Wasm package.

This package is available for FastReport .NET Enterprise and higher (including Ultimate). 

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:

dotnet workload install wasm-tools-net6

For .NET 7:

dotnet workload install wasm-tools

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:

dotnet new blazorwasm -n BlazorWasmDemo

Let’s edit the csproj of our project and add the latest FastReport.Blazor.Wasm package:

<ItemGroup>
 <PackageReference Include="FastReport.Blazor.Wasm" Version="2023.2.0" />
</ItemGroup>

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:

<PropertyGroup>
 <PublishTrimmed>false</PublishTrimmed>
</PropertyGroup>

Now we add the native SkiaSharp libraries as part of our application. Depending on the TargetFramework we need to add:

For .NET 6:

<ItemGroup>
 <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\2.0.23\*.a" />
 <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\2.0.23\*.a" />
</ItemGroup>

For .NET 7:

<ItemGroup>
 <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\3.1.12\*.a" />
 <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\3.1.12\st\*.a" />
</ItemGroup>

In the _Imports.razor file, similarly to the Blazor Server components, add the necessary namespace to view the FastReport components:

@using FastReport.Web
@using FastReport.Web.Blazor.Components

Register FastReport services in our DI container (file Program.cs):

builder.Services.AddScoped(_ => new HttpClient{ BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddFastReport();

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:

builder.Services.AddFastReport(options => options.HttpClient = 
new HttpClient{ BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});

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:

<script src="./_content/FastReport.Web/scripts.js"></script>

Font registration

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):

<ItemGroup>
 <EmbeddedResource Include="Fonts\**">
 <Link>Fonts\%(RecursiveDir)%(Filename)%(Extension)</Link>
 </EmbeddedResource>
</ItemGroup>

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:

static void AddFonts()
{
 var resources = Assembly.GetExecutingAssembly().GetManifestResourceNames();
 foreach (var resource in resources)
 {
 using var font = Assembly.GetExecutingAssembly().GetManifestResourceStream(resource);
 FastReport.Utils.Config.PrivateFontCollection.AddFontFromStream(font);
 }
}
 
AddFonts();

Data registration

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.