Будущее генерации отчетов с помощью Blazor WebAssembly

Компания Microsoft уже давно представила фреймворк для создания интерактивного веб-интерфейса при помощи языка C#, а также HTML и CSS. Он существует в двух вариантах: Server-side (Blazor Server) и Client-side (Blazor WebAssembly). Особенность работы WebAssembly в том, что она исполняется прямо в браузере пользователя, обращаясь к удаленному серверу только за библиотеками, которые нужны для исполнения кода.

FastReport .NET уже поддерживает технологию Blazor в составе пакета FastReport.Web (подробнее). Однако, вплоть до текущего момента, мы поддерживали только Server-side rendering (Blazor Server). Мы долго шли к возможности работы FastReport .NET прямо в браузере пользователя, ведь для нормальной работы требовалась поддержка Skia. Начиная с версии 2023.2 мы рады сообщить вам о поддержке Blazor WebAssembly в составе пакета FastReport.Blazor.Wasm. Данный пакет доступен в составе подписки FastReport .NET Enterprise и выше (в том числе Ultimate).

Внимание! На данный момент поддержка Blazor WebAssembly осуществляется в бета-режиме. Некоторые отчёты и функционал могут не работать. Внимательно ознакомьтесь с документацией и ограничениями перед использованием.

Создание демо приложения

Давайте же создадим тестовое демо приложение, чтобы оценить работу FastReport в WebAssembly.

Сначала необходимо установить WebAssembly Build Tools для сборки проекта с WebAssembly. Если он еще не установлен, то выполните в командной строке следующие команды, в зависимости от TargetFramework вашего приложения:

Для .NET 6:

dotnet workload install wasm-tools-net6

Для .NET 7:

dotnet workload install wasm-tools

Теперь создадим простой демонстрационный проект с Blazor WebAssembly из шаблона. Можно это сделать с помощью Microsoft Visual Studio 2022 или dotnet CLI.  Для простоты воспользуемся командой:

dotnet new blazorwasm -n BlazorWasmDemo

Отредактируем csproj нашего проекта, добавим пакет FastReport.Blazor.Wasm последней версии:

<ItemGroup>
 <PackageReference Include="FastReport.Blazor.Wasm" Version="2023.2.0" />
</ItemGroup>

На данный момент если вы хотите подготовить ваш отчёт в браузере (.frx), необходимо отключить Trimming, так как он мешает работе компиляции скрипта отчёта. Сделать это можно следующим способом:

<PropertyGroup>
 <PublishTrimmed>false</PublishTrimmed>
</PropertyGroup>

Теперь добавляем нативные библиотеки SkiaSharp как часть нашего приложения, в зависимости от TargetFramework необходимо добавить:

Для .NET 6:

<ItemGroup>
 <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\2.0.23\*.a" />
 <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\2.0.23\*.a" />
</ItemGroup>

Для .NET 7:

<ItemGroup>
 <NativeFileReference Include="$(HarfBuzzSharpStaticLibraryPath)\3.1.12\*.a" />
 <NativeFileReference Include="$(SkiaSharpStaticLibraryPath)\3.1.12\st\*.a" />
</ItemGroup>

В файле _Imports.razor, аналогично с компонентами для Blazor Server, добавляем необходимые namespace для видимости компонентов FastReport:

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

Регистрируем сервисы FastReport в нашем DI контейнере (файл Program.cs):

builder.Services.AddScoped(_ => new HttpClient{ BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddFastReport();

Обратите внимание, для работы FastReport в WebAssembly, вы должны иметь настроенный HttpClient в DI контейнере, который может обращаться в root для загрузки необходимых dll сборок. Если вам необходимо переопределить HttpClient для собственного использования, можете просто задать отдельный HttpClient только для нужд FastReport:

builder.Services.AddFastReport(options => options.HttpClient = 
new HttpClient{ BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});

Мы почти закончили наш долгий путь подготовки к использованию FastReport в WebAssembly, осталось всего несколько мелочей. В стандартном wwwroot\index.html файле нам необходимо добавить загрузку js скриптов для корректной работы FastReport:

<script src="./_content/FastReport.Web/scripts.js"></script>

Регистрация шрифтов

Так как FastReport работает с отчетами, а шрифт - неотъемлемая часть любого отчёта, который содержит текст, то FastReport должен взаимодействовать со шрифтами пользователя. Так и происходит, когда генератор отчётов работает на Windows или Linux, однако, когда FastReport работает в браузере, информация об установленных шрифтах на компьютере пользователя становится недоступна. Следовательно, наше приложение должно зарегистрировать шрифты, которые мы будем использовать в собственных отчетах. В нашем приложении мы будем использовать шрифт, который заранее встроим в нашу библиотеку как внедренный ресурс (EmbeddedResource). Для этого, в нашем проекте (.csproj) укажем:

<ItemGroup>
 <EmbeddedResource Include="Fonts\**">
 <Link>Fonts\%(RecursiveDir)%(Filename)%(Extension)</Link>
 </EmbeddedResource>
</ItemGroup>

Положим в папку Fonts все необходимые нам шрифты и зарегистрируем их в нашем Program.cs. Создадим такой метод и сразу же его вызовем:

static void AddFonts()
{
 var resources = Assembly.GetExecutingAssembly().GetManifestResourceNames();
 foreach (var resource in resources)
 {
 using var font = Assembly.GetExecutingAssembly().GetManifestResourceStream(resource);
 FastReport.Utils.Config.PrivateFontCollection.AddFontFromStream(font);
 }
}
 
AddFonts();

Регистрация данных

С этим всё непросто. Мало какой коннектор к базе данных может работать прямо из браузера пользователя. Поэтому этот пункт мы оставляем на усмотрение наших пользователей. К примеру, вы можете запрашивать данные с какого-то стороннего ресурса по HTTP и после регистрировать эти данные в отчёте перед его подготовкой. В нашем же приложении, для демонстрации, мы используем данные из xml файла, которые положим в wwwroot вместе с отчетом.

Внимание! Не используйте этот способ при итоговой публикации проекта, так как. злоумышленники могут легко похитить ваши данные.

Использование компонента WebReportContainer

Наконец изменим файл Index.razor для использования нашего компонента WebReportContainer. Для этого потребуется следующий код:

@page "/"
@using FastReport
@using System.Data;
@inject HttpClient HttpClient
 
@if (isReady)
{
 <WebReportContainer WebReport="myWebReport" />
}
 
@code{
 WebReport myWebReport;
 private bool isReady = false;
 
 protected async override Task OnParametersSetAsync()
 {
 // Получаем отчёт
 var reportBytes = await HttpClient.GetByteArrayAsync("Simple List.frx");
 var reportStream = new MemoryStream(reportBytes);
 var report = Report.FromStream(reportStream);
 
 // Получаем xml базу данных и регистрируем её
 var dataBytes = await HttpClient.GetByteArrayAsync("nwind.xml");
 var dataSet = new DataSet();
 dataSet.ReadXml(new MemoryStream(dataBytes));
 report.RegisterData(dataSet, "NorthWind");
 
 // Создаём WebReport и присваиваем ему отчёт
 myWebReport = new WebReport()
 {
 Report = report,
 EmbedPictures = true
 };
 isReady = true;
 }
}

Если мы увидели наш отчёт в браузере, значит всё прошло успешно:

Напоминаем, что на данный момент поддержка Blazor WebAssembly осуществляется в бета режиме. У вас есть доступ движку отчётов, вы можете строить отчёты и просматривать уже готовые. В будущем добавится поддержка онлайн дизайнера. В целях безопасности - подключения к базам данных внутри отчётов отключены, вы должны будете сами подключить данные из вашего приложения. Мы активно работаем над улучшением нашего WebAssembly-компонента. По всем возникающим вопросам пишите в нашу поддержку support@fastreport.ru.