微软很早就推出了一个使用 C#、HTML 和 CSS 创建交互式网络界面的框架。它有两个版本：服务器端（Blazor Server）和客户端（Blazor WebAssembly）。WebAssembly 的特殊之处在于它是在用户浏览器中直接执行的，只需访问远程服务器上执行代码所需的库即可。

作为 FastReport.Web 软件包的一部分，FastReport .NET 已经支持 Blazor 技术（更多）。不过，到目前为止，我们只支持服务器端渲染（Blazor 服务器）。我们花了很长时间才让FastReport .NET在用户浏览器中正常运行，因为我们需要Skia支持才能稳定工作。从 2023.2 版开始，我们很高兴地宣布 FastReport.Blazor.Wasm 软件包支持 Blazor WebAssembly。该软件包作为 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）中编写报告，就必须禁用 "修剪 "功能，因为它会干扰报告脚本的编译。具体方法如下：

<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 服务器组件类似，添加必要的命名空间以查看 FastReport 组件：

@using FastReport.Web

@using FastReport.Web.Blazor.Components

在 DI 容器中注册 FastReport 服务（文件 Program.cs）：

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

builder.Services.AddFastReport();

请注意，要让 FastReport 在 WebAssembly 中运行，您必须在 DI 容器中配置一个 HttpClient，该容器可以访问 root 以加载必要的 dll。如果您需要重写 HttpClient 以供您使用，您只需为 FastReport 设置一个单独的 HttpClient 即可：

builder.Services.AddFastReport(options => options.HttpClient = 

new HttpClient{ BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)});

我们几乎完成了在 WebAssembly 中准备 FastReport 的漫长旅程，但还有一些收尾工作。在标准的 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()

 {

 // We receive a report

 var reportBytes = await HttpClient.GetByteArrayAsync("Simple List.frx");

 var reportStream = new MemoryStream(reportBytes);

 var report = Report.FromStream(reportStream);

 // Get xml database and register it

 var dataBytes = await HttpClient.GetByteArrayAsync("nwind.xml");

 var dataSet = new DataSet();

 dataSet.ReadXml(new MemoryStream(dataBytes));

 report.RegisterData(dataSet, "NorthWind");

 // Create a WebReport and assign a report to it

 myWebReport = new WebReport()

 {

 Report = report,

 EmbedPictures = true

 };

 isReady = true;

 }

}

如果我们在浏览器中看到我们的报告，一切都很顺利：

我们在此提醒，Blazor WebAssembly 支持目前处于测试模式。您可以访问报告引擎，创建报告并查看现成报告。未来将添加在线设计器支持。出于安全考虑，报告中的数据库连接将被禁用，您需要自行连接应用程序中的数据。我们正在努力改进我们的 WebAssembly 组件。如果您有任何问题，请联系我们的支持人员。