Blazor WebAssembly Sample mit List & Label Cross Platform

Knowledgebase Deutschsprachige KB
, , ,
1

Dieser Artikel stellt eine Beispielanwendung bereit, die zeigt, wie List & Label Cross Platform (LLCP) in einem eigenständigen Blazor WebAssembly (WASM)-Projekt verwendet werden kann, um PDF-Berichte direkt im Browser zu erzeugen.

Das Beispiel läuft vollständig clientseitig und benötigt keinen Backend-Service.

Überblick

Das Beispiel zeigt, wie man:

  • List & Label Cross Platform in ein Blazor-WASM-Projekt integriert
  • Daten aus einer In-Memory-Quelle bereitstellt
  • Ein Berichtslayout programmgesteuert über die DOM-API erstellt
  • Den Bericht als PDF exportiert
  • Die erzeugte Datei im Browser herunterlädt

Die gesamte Verarbeitung (Datenhandling, Layouterstellung, Rendering, Export) erfolgt im Browser mittels WebAssembly.

Download

Das vollständige Beispielprojekt können Sie hier herunterladen:

Blazor WASM Sample.zip (24,4 KB)

Projektstruktur

Das Beispiel ist wie folgt aufgebaut:

BlazorWasmSample/
├── Models/
│   └── Customer.cs
├── Services/
│   ├── CustomerDataService.cs
│   └── ReportService.cs
├── Pages/
│   ├── Home.razor
│   └── ReportPage.razor
└── Layout/
    ├── MainLayout.razor
    └── NavMenu.razor

Komponenten

  • Customer.cs
    Definiert das Datenmodell, das im Bericht verwendet wird.

  • CustomerDataService.cs
    Stellt eine statische In-Memory-Liste mit Beispieldaten bereit.

  • ReportService.cs
    Kümmert sich um die Erstellung und den Export des Berichts mit LLCP.

  • ReportPage.razor
    Zeigt die Daten an und stellt einen Button zur Berichterstellung bereit.

Voraussetzungen

Anforderung Version
.NET SDK 10.0 oder neuer
wasm-tools workload aktuell
Browser Chrome, Edge oder Firefox

Installieren Sie das erforderliche Workload:

dotnet workload install wasm-tools

Falls das Workload aktualisiert werden muss:

dotnet workload restore

Ausführen des Beispiels

  1. Projekt entpacken oder klonen
  2. In den Projektordner wechseln
  3. Entwicklungsserver starten:
dotnet run
  1. Anwendung im Browser öffnen:
http://localhost:5200
  1. Zur Seite Report navigieren und auf Generate Report klicken

Eine PDF-Datei wird erzeugt und heruntergeladen.

Implementierungsdetails

Datenquelle

Das Beispiel verwendet eine einfache Liste von Customer-Objekten:

  • Id
  • Name
  • City
  • Revenue

Die Daten werden über ObjectDataProvider unter dem Tabellennamen:

Customer

an List & Label übergeben.

Die Feldnamen entsprechen den C#-Eigenschaftsnamen.

Berichtslayout

Das Berichtslayout wird programmgesteuert über die LLCP-DOM-API erstellt.

Beispiel:

var title = project.Objects.AddNewText();
title.Position.Set(20_000, 15_000, 170_000, 12_000);
title.Paragraphs.AddNew().Contents = "\"Customer Revenue Report\"";

Eine Tabelle wird innerhalb eines ReportContainer erstellt und an die Datenquelle gebunden:

var table = container.SubItems.AddNewTable();
table.TableId = "Customer";

Die Koordinaten werden in 1/1000 mm angegeben.

PDF-Export

Der Bericht wird direkt in einen MemoryStream exportiert:

var exportConfig = new ExportConfiguration(
    LlExportTarget.Pdf,
    pdfOutputStream,
    projectStream);

listLabel.Export(exportConfig);

Ein Zugriff auf das Dateisystem ist nicht erforderlich.

Dateidownload

Das erzeugte PDF wird über JavaScript-Interop an den Browser übergeben:

  • Byte-Array in Base64 konvertieren
  • Blob erzeugen
  • Download über temporären Link auslösen

Hinweise zu Blazor WebAssembly

Ausführungsmodell

  • Die Anwendung läuft vollständig im Browser
  • Es erfolgt keine serverseitige Verarbeitung
  • Alle Ressourcen werden als Teil des WASM-Bundles geladen

Einschränkungen

Thema Beschreibung
Threading Standardmäßig single-threaded
Dateizugriff Kein direkter Zugriff auf das Dateisystem des Benutzers
Bundlegröße Enthält die SkiaSharp-WASM-Runtime
Designer Der interaktive List & Label Designer ist in WASM nicht verfügbar

Erweiterung des Beispiels

Das Beispiel kann auf verschiedene Weise erweitert werden:

  • Zusätzliche Felder zum Datenmodell hinzufügen
  • In-Memory-Datenquelle durch JSON oder Datenbank ersetzen
  • Vorgefertigtes Berichtslayout laden statt DOM-Erstellung
  • Diagramme, Barcodes oder weitere Berichtselemente hinzufügen

Wann eignet sich dieser Ansatz?

Diese Architektur eignet sich, wenn:

  • Alle benötigten Daten im Client verfügbar sind
  • Berichte klein bis mittelgroß sind
  • Keine Server-Infrastruktur gewünscht ist

Für Szenarien mit großen Datenmengen, zentraler Verarbeitung oder serverseitigem Datenzugriff kann eine gehostete Architektur sinnvoller sein.