logo
small logo
  • Продукты
  • Купить
  • Поддержка
  • О нас
  • Клиентская панель Поддержка
  • Главная
  • /
  • Статьи
  • /
  • Будущее генерации отчетов с помощью Blazor WebAssembly
  • Как отобразить много отчетов на одной странице в Blazor

    12 июля 2022 г.

    Нередко у наших пользователей появляется необходимость отобразить два отчета с разными данными на одной

    Подробнее
  • Кастомизация панели инструментов и настройка экспортов в FastReport.Web for Core

    6 сентября 2021 г.

    Нередко у наших пользователей возникают потребности в изменении внешнего вида панели инструментов или настройке меню

    Подробнее
  • Настройка расширенных функций экспорта в FastReport.Web for Core и Blazor Server

    6 декабря 2021 г.

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

    Подробнее
  • Как использовать объект WebReport в приложениях ASP .NET Core

    17 января 2018 г.

    Не так давно FastReport порадовал нас новой библиотекой - FastReport Core. Это специальная версия FastReport

    Подробнее
  • Как обновить веб отчет FastReport.Core

    21 сентября 2020 г.

    Иногда вам требуется обновлять отчет, например, если вы подаете на вход новое значение переменной, или

    Подробнее

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

14 марта 2023 г.

Компания 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 осуществляется в бета режиме. На момент сборки 2023.2.0 не поддерживаются: экспорты, онлайн дизайнер, коннекторы к базам данным, Trimming приложения (если используется подготовка frx-отчётов). Однако, мы активно работаем над улучшением нашего WebAssembly-компонента. По всем возникающим вопросам пишите в нашу поддержку support@fastreport.ru.

О продукте Купить
avatar
Kirill Kornienko
.NET разработка
Fast Reports Team: Kirill Kornienko - NET Development at Fast Reports
.NET FastReport WebReport Blazor

Добавить комментарий
logo
  • +7(800)551-75-80
  • info@fastreport.ru
  • Ростов-на-Дону, Россия, 344082, ул.Обороны 24, офис 311
  • Купить
  • Загрузить
  • Документация
  • Отзывы
  • Как деинсталировать
  • FAQ
  • Видео уроки
  • Форум
  • Условия оказания поддержки
  • Статьи
  • Наши Новости
  • Пресса о нас
  • Реселлеры
  • Нестандартное лицензирование
  • ВУЗам
  • Карьера
  • Контакты

© 1998-2023 ООО «Быстрые отчеты»

  • Согласие с обработкой персональных данных
  • Политика в отношении обработки персональных данных
  • Не является публичной офертой