BlazorReports.Components 0.21.0

There is a newer version of this package available.
See the version list below for details.
dotnet add package BlazorReports.Components --version 0.21.0                
NuGet\Install-Package BlazorReports.Components -Version 0.21.0                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="BlazorReports.Components" Version="0.21.0" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorReports.Components --version 0.21.0                
#r "nuget: BlazorReports.Components, 0.21.0"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install BlazorReports.Components as a Cake Addin
#addin nuget:?package=BlazorReports.Components&version=0.21.0

// Install BlazorReports.Components as a Cake Tool
#tool nuget:?package=BlazorReports.Components&version=0.21.0                

Blazor Reports

Generate PDF reports using Blazor Components. Easily create a report server or generate reports from existing projects.

Requirements

  • .NET 8.0 or later for report server
  • .NET 6.0 or later for Blazor Components shared library
  • Chrome, Chromium, or Edge browser for report generation

Basic usage for report server

  1. Install the Blazor Reports NuGet package:
    dotnet add package BlazorReports
    
  2. Configure Blazor Reports and map the component:
    var builder = WebApplication.CreateSlimBuilder(args);
    
    builder.Services.AddBlazorReports(); // Configure BlazorReports
    
    var app = builder.Build();
    
    app.MapBlazorReport<MyBlazorComponent>(); // Map Blazor Component
    app.MapBlazorReport<OtherBlazorComponent, MyDataDto>(); // Map Blazor Component and receive data
    
    app.Run();
    
  3. Send HTTP POST request to the Blazor Reports endpoint:
    POST /MyBlazorComponent
    
    POST /OtherBlazorComponent
    Content-Type: application/json
    {
      "text": "Hello World!"
    }
    
  4. Get back PDF Report.

Sample Blazor Components

// MyBlazorComponent: Basic component
<h3>Hello World!</h3>

@code {

}
// OtherBlazorComponent: Component that receives data
<h3>@Data?.Text</h3>

@code {
    [Parameter]
    public required MyDataDto Data { get; set; }
}

Advanced usage

Add Base styles

  1. Configure base styles file in options for AddBlazorReports:
    var builder = WebApplication.CreateSlimBuilder(args);
    
    builder.Services.AddBlazorReports(options =>
    {
      options.BaseStylesPath = "wwwroot/styles/base.css";
    });
    
    var app = builder.Build();
    
    app.MapBlazorReport<MyBlazorComponent>();
    
    app.Run();
    
  2. Configured components will now have the base styles applied.

Configure Tailwind CSS

  1. Add 'tailwind.config.js' file to the root of your project:
    /** @type {import('tailwindcss').Config} */
    module.exports = {
    content: ['./**/*.{razor,html}'],
    theme: {
    extend: {},
    },
    plugins: [],
    }
    
  2. Add 'tailwind.css' file:
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  3. Use the following command to generate the base.css file:
    npx tailwindcss -i ./wwwroot/styles/tailwind/tailwind.css -o ./wwwroot/styles/base.css -m --watch
    
  4. Configure BaseStyles in Program.cs:
    var builder = WebApplication.CreateSlimBuilder(args);
    
    builder.Services.AddBlazorReports(options =>
    {
      options.BaseStylesPath = "wwwroot/styles/base.css";
    });
    
    var app = builder.Build();
    
    app.MapBlazorReport<MyBlazorComponent>();
    
    app.Run();
    

Configure assets

  1. Configure assets in Program.cs:
    var builder = WebApplication.CreateSlimBuilder(args);
    
    builder.Services.AddBlazorReports(options =>
    {
      options.AssetsPath = "wwwroot/assets";
    });
    
    var app = builder.Build();
    
    app.MapBlazorReport<MyBlazorComponent>();
    
    app.Run();
    
  2. Add inheritance for BlazorReportsComponentBase:
    @inherits BlazorReports.Components.BlazorReportsBase
    
    <img src="@GlobalAssets.GetValueOrDefault("logo-salud.png")"/>
    
    @code {
    
    }
    
  3. All files will be available as base64 strings in the 'GlobalAssets' dictionary.

OpenAPI, Swagger, Authentication, Authorization, Validation, etc.

Blazor reports utilizes Minimal APIs under the hood and can be configured as any other Minimal API project.

For example, to add OpenAPI and Swagger:

  1. Add OpenAPI and Swagger NuGet packages.
  2. Configure OpenAPI and Swagger:
    var builder = WebApplication.CreateSlimBuilder(args);
    
    builder.Services.AddBlazorReports();
    builder.Services.AddEndpointsApiExplorer();
    builder.Services.AddSwaggerGen();
    
    var app = builder.Build();
    
    app.UseSwagger();
    app.UseSwaggerUI();
    
    app.MapBlazorReport<MyComponent, MyComponentData>();
    app.MapBlazorReport<MyOtherComponent>();
    
    app.Run();
    
  3. Open Swagger UI at '/swagger' endpoint.
  4. You can see each report endpoint configured with expected data model.
Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (1)

Showing the top 1 NuGet packages that depend on BlazorReports.Components:

Package Downloads
BlazorReports

Generate PDF reports using Blazor Components. Easily create a report server or generate reports from existing projects.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.24.0 110 11/19/2024
0.23.0 265 8/24/2024
0.22.0 314 5/22/2024
0.21.0 138 5/19/2024
0.20.0 503 10/27/2023
0.19.0 235 8/28/2023
0.18.0 202 8/22/2023
0.17.0 204 8/8/2023
0.16.0 228 8/3/2023
0.15.0 207 8/3/2023
0.14.0 222 7/25/2023
0.13.0 223 7/11/2023
0.12.0 211 6/27/2023
0.11.0 195 6/26/2023
0.10.0 209 6/24/2023
0.9.0 200 6/23/2023
0.8.0 214 6/23/2023
0.7.0 197 6/23/2023
0.6.0 229 6/7/2023
0.5.0 208 6/6/2023
0.4.0 197 6/4/2023
0.3.0 191 6/4/2023
0.2.0 198 5/31/2023
0.1.0 206 5/30/2023