logo
small logo
  • Products
  • Buy
  • Support
  • Articles
  • Customer panel Support
    • en
    • ru
    • pt
    • es
    • de
    • pl
    • JP
    • ZH
  • Home
  • /
  • Articles
  • /
  • Reports and PDF documents in Blazor
  • Report generators family FastReport brief review

    March 23, 2020

    Without reporting it is impossible to carry on business in any sphere of life. Bureaucracy

    read more
  • How to use Online Designer in ASP .Net Core

    January 17, 2018

    One of the novelties by FastReport .Net 2018 was the adaptation of OnlineDesigner to the

    read more
  • How to use WebReport with ASP .Net Web Core application

    January 17, 2018

    Recently FastReport introduced a new library under the .Net - FastReport Core platform. This is

    read more
  • FastCube - High-Speed OLAP Cube Engine and Pivot Grid

    February 29, 2020

    It is difficult to imagine data analysis without OLAP (On-Line Analytical Processing) technology. Although there

    read more
  • How to update the FastReport.Core web report

    September 21, 2020

    Sometimes you need to update the report, for example if you input a new variable

    read more

Reports and PDF documents in Blazor

April 5, 2021

Microsoft has recently launched a web platform called Blazor. This framework allows creating an interactive web interface with the C# language, as well as HTML and CSS. Blazor is highly demanded and rapidly gains popularity among many .NET developers. We have launched a FastReport.Web.Blazor package with components for working with reports in web applications based on Blazor Server technology. This package is now in beta status and will be further developed gradually.

Below we describe the creation of a simple web application based on Blazor Server technology. You can download this demo project in my profile at GitHub.

To begin with, we create our new project. We will use a ready template for Blazor Server.  You can create a project with Visual Studio (both for Windows and for macOS) or with.NET CLI. In both cases, we will need.NET Core SDK (.NET SDK) version 3.1 or newer, which can be downloaded from the Microsoft official website.

Visual Studio 2019:

Visual Studio 2019

For .NET CLI we type the following command in the console (terminal):

dotnet new blazorserver

We see the following project structure:

We see the following project structure

To simplify the project, we delete some unnecessary files from the created template:

- the whole Data folder
- Pages\Counter.razor
- Pages\FetchData.razor
- Shared\SurveyPrompt.razor

We add a new folder called “Reports” to our project folder and place all necessary reports into it. For demonstration, I have added simple reports which are applied during installation of the FastReport demoversion: Simple List, Complex (Master-detail + Group), Subreport, Barcode, and Chart. Also, for these reports we need a database in xml - nwind.xml format; we place it in the same folder.

FastReport.Web.Blazor

Also, it is necessary that the content of the Reports folder could be copied into the output folder; for that, we select the relevant files in Visual Studio and “Copy if newer” in Properties.

FastReport.Web.Blazor

If there is no Visual Studio, you may manually indicate this property in the project file (.csproj):

<ItemGroup>
 <None Update="Reports\*.*">
 <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
 </None>
 </ItemGroup>

Then we have to add FastReport.Core and FastReport.Web.Blazor packages to our project. This can be done also via Visual Studio or via .NET CLI. Let us consider both variants.

To add a package to Visual Studio, click the right mouse button on our project file (csproj). A context menu opens; select “Manage NuGet packages”. Search for both necessary packages. Mind that the tick “Include prerelease” must be active.

Manage NuGet packages

To add a package via .NET CLI, type the following commands:

dotnet add package FastReport.Core --prerelease
dotnet add package FastReport.Web.Blazor --prerelease

Then we should add the namespaces used by FastReport.Core and FastReport.Web.Blazor into the list of files namespace used for Razor. For that, edit the _Imports.razor file by adding several lines:

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

Register FastReport in the configuration of our application. To do that, open Startup.cs file and add the following line in the end of Configure method:

app.UseFastReport();

In Pages\_Host.cshtml file, substitute the first line for the following:

@page "/{ReportName}"

This is necessary to make the URL able to contain the name of the report that we want to open.

Then we edit the navigation menu Shared\NavMenu.razor to map all the available reports in the Reports folder and to switch between them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@using System.IO
 
<div class="top-row pl-4 navbar navbar-dark">
 <a class="navbar-brand" href="">DemoBlazor</a>
</div>
 
<div>
 <ul class="nav flex-column">
 @foreach (string report in reports)
 {
 <li class="nav-item px-2">
 <NavLink class="nav-link" href="@report">
 @Path.GetFileNameWithoutExtension(report)
 </NavLink>
 </li>
 }
 </ul>
</div>
 
@code {
 // List of reports in folder
 private string[] reports =
 Directory.GetFiles(
 Path.Combine(
 Directory.GetCurrentDirectory(), "Reports"))
 .Where((filename) => Path.GetExtension(filename) == ".frx")
 .Select((filename) => Path.GetFileName(filename))
 .ToArray();
}

Now we are coming to the main stage. Edit the Pages\Index.razor file to map reports with the main component of the FastReport.Web.Blazor library – WebReportContainer. Type the following:

1
2
3
4
5
6
7
8
9
10
11
12
@page "/"
@page "/{ReportName}"
 
<WebReportContainer WebReport="@MyWebReport" />
 
@code {
 [Parameter]
 public string ReportName { get; set; }
 
 public WebReport MyWebReport { get; set; }
}
 

We have added the WebReportContainer component and attributed a single property to it – an object of WebReport class.

Let us create another file with a similar name – Index.razor.cs next to the Pages\Index.razor file and write a simple logic in it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
using System.IO;
using System.Data;
using FastReport;
using FastReport.Web.Blazor;
 
namespace DemoBlazor.Pages
{
 public partial class Index
 {
 const string DEFAULT_REPORT = "Simple List.frx";
 readonly string directory;
 
 DataSet DataSet { get; }
 
 protected override void OnParametersSet()
 {
 base.OnParametersSet();
 
 var report = Report.FromFile(
 Path.Combine(
 directory,
 string.IsNullOrEmpty(ReportName) ? DEFAULT_REPORT : ReportName));
 
 // Registers the user dataset
 report.RegisterData(DataSet, "NorthWind");
 
 // Create new WebReport object
 MyWebReport = new WebReport
 {
 Report = report,
 };
 }
 
 public Index()
 {
 directory = Path.Combine(
 Directory.GetCurrentDirectory(),
 Path.Combine("Reports"));
 
 DataSet = new DataSet();
 DataSet.ReadXml(Path.Combine(directory, "nwind.xml"));
 }
 }
}

This logic is responsible for registering data, creating a WebReport object, attributing the necessary parameters to it, including the very Report which we download either from the report name in the enquire line or use by default, defined in the constant DEFAULT_REPORT.

After the remaining minor manipulations with the style and formatting, we get a web application that can handle reports and provides an opportunity to create documents in various formats (PDF, Excel, Word, and Open Office).

FastReport.Web.Blazor

Useful links:

- Documentation (en): https://www.fast-report.com/download/docs/FRNet/FastReport.Web.Blazor_manual_(en).pdf
- Online demo: https://fastreportwebblazor.azurewebsites.net/
- NuGet package: https://www.nuget.org/packages/FastReport.Web.Blazor

about product download buy
avatar
Kirill Kornienko
Developer
.NET Visual Studio FastReport Core C# 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
  • Buy
  • Download
  • Documentation
  • Testimonials
  • How to uninstall
  • Ticket system
  • FAQ
  • Tutorial Video
  • Forum
  • Articles
  • Our News
  • Press about us
  • Resellers
  • Our team
  • Contact us

© 1998-2021 by Fast Reports Inc.

  • Privacy Policy