logo
small logo
  • Produkte
  • Shop
  • Support
  • Über uns
  • Customer panel Support
    • en
    • de
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • Zukunft der mit Blazor WebAssembly generierten Berichte
  • Anpassung der Symbolleiste und den Exporteinstellungen in FastReport.Web für Core

    6. September 2021

    Unsere Benutzer sollen oft das Aussehen der Symbolleiste ändern oder das Exportmenü anpassen, aber nicht

    read more
  • Einrichten von erweiterten Exportfunktionen in FastReport.Web for Core und Blazor Server

    6. Dezember 2021

    Es kommt nicht selten vor, dass unsere Benutzer die Dateiexportparameter ändern müssen. Diesen Vorgang

    read more
  • Wie man in Blazor mehrere Berichte auf einer Seite anzeigt

    12. Juli 2022

    Häufig müssen unsere Benutzer zwei Berichte mit unterschiedlichen Daten auf derselben Seite anzeigen. Stellen

    read more
  • Wie ein WebReport-Objekt in FastReport.Core aktualisieren

    21. September 2020

    Manchmal gibt es eine Aufgabe, den Report zu aktualisieren, z. B. wenn Sie einen neuen

    read more
  • Berichte und PDF-Dokumente in der Blazor-Anwendung

    5. April 2021

    Microsoft hat kürzlich ein Web-Framework namens Blazor veröffentlicht. Mit diesem Framework kann man ein interaktives

    read more

Zukunft der mit Blazor WebAssembly generierten Berichte

14. März 2023

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:

Der fertige Bericht wird im Browser angezeigt

Wir möchten daran erinnern, dass sich die Unterstützung für Blazer Web Assembly derzeit im Beta-Modus befindet. 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.

about product buy
avatar
Kirill Kornienko
.NET Development
Fast Reports Team: Kirill Kornienko - NET Development at Fast Reports
.NET FastReport WebReport Blazor

Add comment
logo
  • 800-985-8986 (English, US)
  • +4930568373928 (German)
  • +55 19 98147-8148 (Portuguese)
  • info@fast-report.com
  • 901 N Pitt Str #325 Alexandria VA 22314
  • Shop
  • Download
  • Dokumentation
  • Referenzen
  • Informationen zur Deinstallation unserer Produkte
  • FAQ
  • Tutorial Video
  • Forum
  • Support SLA
  • Articles
  • Unsere Nachrichten
  • Presse über uns
  • Partner
  • Außergewöhnliche Lizenzierung
  • Kontakte

© 1998-2023 by Fast Reports Inc.

  • Datenschutz
  • Cookies Policy

Trustpilot
By clicking “Accept all, you agree Fast Reports can store cookies on your device and disclose information in accordance with our Cookie Policy.