Raporty i dokumenty PDF w Blazorze

Microsoft udostępnił niedawno platformę webową o nazwie Blazor. Framework ten umożliwia tworzenie interaktywnych interfejsów internetowych za pomocą języka C#, a także HTML i CSS. Blazor jest bardzo pożądany i szybko zdobywa popularność wśród wielu programistów .NET. Zaktualizowaliśmy pakiet FastReport.Web, dodając komponenty Blazor do pracy z raportami w aplikacjach internetowych opartych na technologii Blazor Server. Komponenty te są używane w .NET Core 3.1 (i wyższych) i są w stanie beta i będą z czasem udoskonalane.

Poniżej opisujemy tworzenie prostej aplikacji webowej opartej o technologię Blazor Server. Projekt demo można pobrać na moim profilu na GitHubie.

Na początek tworzymy nasz nowy projekt. Skorzystamy z gotowego szablonu dla Blazor Server.  Projekt możemy stworzyć za pomocą Visual Studio (zarówno dla Windows jak i macOS) lub za pomocą.NET CLI. W obu przypadkach będziemy potrzebowali.NET Core SDK (.NET SDK) w wersji 3.1 lub nowszej, które można pobrać z oficjalnej strony Microsoftu.

Visual Studio 2019:

Dla .NET CLI wpisujemy w konsoli (terminalu) następujące polecenie:

dotnet new blazorserver

Widzimy następującą strukturę projektu:

Aby uprościć projekt, usuwamy kilka zbędnych plików z tworzonego szablonu:

• cały folder Data
• PagesCounter.razor
• PagesFetchData.razor
• SharedSurveyPrompt.razor

Do naszego katalogu projektu dodajemy nowy folder o nazwie "Reports" i umieszczamy w nim wszystkie potrzebne raporty. Dla przykładu dodałem proste raporty, które są stosowane podczas instalacji FastReport wersji demo: Simple List, Complex (Master-detail + Group), Subreport, Barcode oraz Chart. Do tych raportów potrzebujemy również bazę danych w formacie xml - nwind.xml, którą umieszczamy w tym samym folderze.

Konieczne jest również, aby zawartość folderu Reports mogła zostać skopiowana do folderu wyjściowego; w tym celu zaznaczamy odpowiednie pliki w Visual Studio i "Copy if newer" w Properties.

Jeśli nie ma Visual Studio, możesz ręcznie wskazać tę właściwość w pliku projektu (. csproj):

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

Następnie musimy dodać pakiety FastReport.Core i FastReport.Web do naszego projektu. Można to zrobić również poprzez Visual Studio lub poprzez .NET CLI. Rozważmy oba warianty.

Aby dodać pakiet do Visual Studio, należy kliknąć prawym przyciskiem myszy na pliku naszego projektu (csproj). Otworzy się menu kontekstowe; wybierz "Zarządzaj pakietami NuGet". Wyszukujemy oba potrzebne pakiety. Należy pamiętać, że zaznaczenie "Include prerelease" musi być aktywne.

Aby dodać pakiet poprzez .NET CLI, wpisz następujące polecenia:

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

Następnie należy dodać przestrzenie nazw używane przez FastReport.Core i FastReport.Web do listy przestrzeni nazw plików używanych przez Razora. W tym celu edytujemy plik _Imports.razor dodając kilka linii:

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

Zarejestruj FastReport w konfiguracji naszej aplikacji. W tym celu otwórz plik Startup.cs i dodaj następującą linię na końcu metody Configure:

app.UseFastReport();

W pliku Pages\_Host.cshtml zastąp pierwszą linię następującą linią:

@page "/{ReportName}"

Jest to konieczne, aby adres URL mógł zawierać nazwę raportu, który chcemy otworzyć.

Następnie edytujemy menu nawigacyjne SharedNavMenu.razor, aby zmapować wszystkie dostępne raporty w folderze Reports i przełączać się pomiędzy nimi.

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();
}

Teraz przechodzimy do głównego etapu. Edytuj plik Pages\Index.razor, aby zmapować raporty z głównym komponentem biblioteki FastReport.Web.Blazor - WebReportContainer. Wpisz następujące dane:

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; }
}
 

Dodaliśmy komponent WebReportContainer i przypisaliśmy mu jedną właściwość - obiekt klasy WebReport.

Utwórzmy jeszcze jeden plik o podobnej nazwie - Index.razor.cs obok pliku PagesIndex.razor i napiszmy w nim prostą logikę:

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;
 
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"));
 }
 }
}

Logika ta odpowiedzialna jest za rejestrację danych, utworzenie obiektu WebReport, przypisanie mu niezbędnych parametrów, w tym samego Raportu, który pobieramy albo z nazwy raportu w linii zapytania, albo używamy domyślnie, zdefiniowanego w stałej DEFAULT_REPORT.

Po pozostałych drobnych manipulacjach ze stylem i formatowaniem otrzymujemy aplikację internetową, która może obsługiwać raporty i daje możliwość tworzenia dokumentów w różnych formatach (PDF, Excel, Word, Open Office).

Przydatne linki:

- Dokumentacja(en): https://www.fast-report.com/public_download/docs/FRNet/online/en/ProgrammerManual/en-US/UsingBlazor.html
- Demo online: https://fastreportwebblazor.azurewebsites.net/
- Pakiet NuGet: https://www.nuget.org/packages/FastReport.Web