Blazor WebAssembly Sample with List & Label Cross Platform

Knowledgebase English KB
, ,
1

This article provides a sample application demonstrating how to use List & Label Cross Platform (LLCP) in a standalone Blazor WebAssembly (WASM) project to generate PDF reports directly in the browser.

The sample runs entirely client-side and does not require a backend service.

Overview

The sample shows how to:

  • Integrate List & Label Cross Platform into a Blazor WASM project
  • Provide data from an in-memory source
  • Create a report layout programmatically using the DOM API
  • Export the report to PDF
  • Download the generated file in the browser

All processing (data handling, layout creation, rendering, export) is executed in the browser using WebAssembly.

Download

You can download the complete sample project here:

Blazor WASM Sample.zip (24,4 KB)

Project Structure

The sample is organized as follows:

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

Components

  • Customer.cs
    Defines the data model used in the report.

  • CustomerDataService.cs
    Provides a static in-memory list of sample data.

  • ReportService.cs
    Handles report creation and export using LLCP.

  • ReportPage.razor
    Displays the data and provides a button to generate the report.

Prerequisites

Requirement Version
.NET SDK 10.0 or newer
wasm-tools workload latest
Browser Chrome, Edge, or Firefox

Install the required workload:

dotnet workload install wasm-tools

In case that the workload needs to be updated:

dotnet workload restore

Running the Sample

  1. Extract or clone the project
  2. Navigate to the project folder
  3. Start the development server:
dotnet run
  1. Open the application in your browser:
http://localhost:5200
  1. Navigate to the Report page and click Generate Report

A PDF file will be generated and downloaded.

Implementation Details

Data Source

The sample uses a simple list of Customer objects:

  • Id
  • Name
  • City
  • Revenue

The data is exposed to List & Label via ObjectDataProvider under the table name:

Customer

Field names correspond to the C# property names.

Report Layout

The report layout is created programmatically using the LLCP DOM API.

Example:

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

A table is created inside a ReportContainer and bound to the data source:

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

Coordinates are defined in 1/1000 mm.

PDF Export

The report is exported directly to a MemoryStream:

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

listLabel.Export(exportConfig);

No file system access is required.

File Download

The generated PDF is transferred to the browser using JavaScript interop:

  • Convert byte array to Base64
  • Create a Blob
  • Trigger a download via a temporary link

Notes on Blazor WebAssembly

Execution Model

  • The application runs entirely in the browser
  • No server-side processing is involved
  • All resources are loaded as part of the WASM bundle

Limitations

Topic Description
Threading Default execution is single-threaded
File access No direct access to the user’s file system
Bundle size Includes SkiaSharp WASM runtime
Designer The interactive List & Label Designer is not available in WASM

Extending the Sample

You can adapt the sample in several ways:

  • Add additional fields to the data model
  • Replace the in-memory data source with JSON or database-backed data
  • Load a predefined report layout instead of building it via DOM
  • Add charts, barcodes, or additional report elements

When to Use This Approach

This architecture is suitable when:

  • All required data is available in the client
  • Reports are relatively small or medium in size
  • No server infrastructure is desired

For scenarios involving large datasets, centralized processing, or server-side data access, a hosted architecture may be more appropriate.