Zukunft der mit Blazor WebAssembly generierten Berichte

Microsoft hat seit langem ein Framework für die Erstellung interaktiver Webschnittstellen mit C# sowie HTML und CSS eingeführt. Es gibt zwei Varianten: Server-Side (Blazor Server) und Client-Side (Blazor WebAssembly). Die Besonderheit von WebAssembly besteht darin, dass es direkt im Browser des Benutzers ausgeführt wird und nur für die Bibliotheken, die zur Ausführung des Codes benötigt werden, auf einen Remote Server zurückgreift.

FastReport .NET unterstützt bereits die Blazor-Technologie als Teil des FastReport.Web-Pakets (mehr). Bis jetzt haben wir jedoch nur das Server-Side Rendering (Blazor Server) unterstützt. Wir haben lange daran gearbeitet, FastReport.NET direkt im Browser des Benutzers zum Laufen zu bringen, da die Skia-Unterstützung für den normalen Betrieb erforderlich war. Wir freuen uns ankündigen zu können, dass ab Version 2023.2 Blazor WebAssembly im FastReport.Blazor.Wasm Paket unterstützt wird. Dieses Paket ist als Teil des FastReport .NET Enterprise und höher (einschließlich Ultimate) Abonnements erhältlich.

Achtung! Im Moment wird die Unterstützung für Blazor WebAssembly im Beta-Modus ausgeführt. Einige Berichte und Funktionen funktionieren möglicherweise nicht. Bitte lesen Sie die Unterlagen und Zusatzbedingungen sorgfältig durch, bevor Sie dieses Produkt nutzen.

Erstellen einer Demo-Anwendung 

Lassen Sie uns eine Test-Demo-Anwendung erstellen, um zu prüfen, wie FastReport in WebAssembly funktioniert.

Zunächst müssen Sie WebAssembly Build Tools installieren, um Ihr Projekt mit WebAssembly zu erstellen. Wenn sie noch nicht installiert sind, führen Sie je nach TargetFramework Ihrer Anwendung die folgenden Befehle in der Befehlszeile aus:

Für .NET 6:

dotnet workload install wasm-tools-net6

Für .NET 7:

dotnet workload install wasm-tools

Erstellen Sie nun ein einfaches Demoprojekt mit Blazor WebAssembly aus der Vorlage. Sie können dies mit Microsoft Visual Studio 2022 oder der dotnet CLI tun. Der Einfachheit halber verwenden Sie den Befehl:

dotnet new blazorwasm -n BlazorWasmDemo

Bearbeiten Sie csproj Ihres Projekts und fügen Sie das neueste FastReport.Blazor.Wasm-Paket hinzu:

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

Wenn Sie Ihren Bericht derzeit im Browser (.frx) erstellen möchten, müssen Sie das Trimming deaktivieren, da es die Kompilierung des Berichtsskripts behindert. Dies können Sie wie folgt tun:

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

Fügen Sie nun die nativen SkiaSharp-Bibliotheken als Teil Ihrer Anwendung hinzu, je nach dem TargetFramework wird folgendes hinzugefügt:

Für .NET 6:

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

Für .NET 7:

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

Fügen Sie in der Datei _Imports.razor, ähnlich wie bei den Komponenten für Blazor Server, den notwendigen Namespace für die Sichtbarkeit der FastReport-Komponenten hinzu:

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

Registrieren Sie die FastReport-Dienste in dem DI-Container (Program.cs Datei):

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

Achtung! Damit FastReport in WebAssembly funktioniert, müssen Sie den HttpClient im DI-Container konfigurieren, der auf Root zugreifen kann, um die erforderlichen DLL-Builds herunterzuladen. Wenn Sie den HttpClient für Ihre eigenen Zwecke überschreiben müssen, können Sie einfach einen separaten HttpClient nur für FastReport-Bedürfnisse angeben:

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

Wir sind fast fertig mit unseren langen Vorbereitungen auf die Verwendung von FastReport in WebAssembly. Eigentlich sind nur noch ein paar Kleinigkeiten übrig. In der wwwroot\index.html Standarddatei muss das Laden von js-Skripten hinzugefügt werden, damit FastReport korrekt funktioniert:

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

Registrierung von Schriftarten 

Da FastReport mit Berichten arbeitet und Schriftarten ein wesentlicher Bestandteil jedes Berichts mit dem Text sind, muss FastReport mit den Schriftarten des Benutzers interagieren. Dies ist der Fall, wenn der Berichtsgenerator unter Windows oder Linux läuft. Wenn FastReport jedoch in einem Browser läuft, sind die Informationen über die auf dem Computer des Benutzers installierten Schriftarten nicht mehr verfügbar. Daher muss unsere Anwendung die Schriftarten registrieren, die wir in unseren eigenen Berichten verwenden werden. In unserer Anwendung werden wir eine Schriftart verwenden, die wir im Voraus als eingebettete Ressource (EmbeddedResource) in unsere Bibliothek einbetten werden. Zu diesem Zweck geben wir in unserem Projekt (.csproj) folgendes an:

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

Legen Sie alle benötigten Schriftarten in den Ordner "Fonts" und registrieren Sie sie in der Program.cs Datei. Erstellen Sie diese Methode und rufen Sie sie sofort auf:

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();

Datenregistrierung 

Das ist nicht einfach. Nur wenige Datenbank Connectors können direkt über den Browser des Benutzers die Verbindung herstellen. Daher überlassen wir diesen Punkt dem Ermessen unserer Benutzer. Beispielsweise können Sie Daten von einer Drittanbieter-Ressource über HTTP anfordern und diese Daten dann in einem Bericht registrieren, bevor dieser generiert wird. In unserer Anwendung verwenden wir zu Demonstrationszwecken Daten aus einer xml-Datei, die wir zusammen mit dem Bericht in wwwroot ablegen.

Warnung! Verwenden Sie diese Methode nicht für die endgültige Veröffentlichung des Projekts, da Angreifer Ihre Daten leicht stehlen können.

Verwendung der WebReportContainer-Komponente 

Ändern Sie schließlich die Index.razor Datei, um unsere WebReportContainer Komponente zu verwenden. Dazu ist der folgende Code erforderlich:

@page "/"
@using FastReport
@using System.Data;
@inject HttpClient HttpClient
 
@if (isReady)
{
 <WebReportContainer WebReport="myWebReport" />
}
 
@code{
 WebReport myWebReport;
 private bool isReady = false;
 
 protected async override Task OnParametersSetAsync()
 {
 // Abrufen des Berichts 
 var reportBytes = await HttpClient.GetByteArrayAsync("Simple List.frx");
 var reportStream = new MemoryStream(reportBytes);
 var report = Report.FromStream(reportStream);
 
 // Abrufen und Registrieren der xml-Datenbank
 var dataBytes = await HttpClient.GetByteArrayAsync("nwind.xml");
 var dataSet = new DataSet();
 dataSet.ReadXml(new MemoryStream(dataBytes));
 report.RegisterData(dataSet, "NorthWind");
 
 // Erstellen des WebReport und Zuordnung des Berichts 
 myWebReport = new WebReport()
 {
 Report = report,
 EmbedPictures = true
 };
 isReady = true;
 }
}

Sehen wir unseren Bericht im Browser, dann ist alles gut gelaufen:

Sie haben Zugriff auf die Reporting Engine, können Berichte erstellen und fertige anzeigen. Online-Designer-Unterstützung wird in Zukunft hinzugefügt. Aus Sicherheitsgründen sind Datenbankverbindungen in Berichten deaktiviert.Sie müssen Daten aus Ihrer Anwendung selbst verbinden. Wir arbeiten hart daran, unsere Web-Assembly-Komponente zu verbessern. Wenn Sie Fragen haben, wenden Sie sich bitte an unser Support-Team unter support@fast-report.com.