界面组件DevExpress中文教程 - 如何在Node.js应用中创建报表？

DevExpress Reporting是.NET Framework下功能完善的报表平台，它附带了易于使用的Visual Studio报表设计器和丰富的报表控件集，包括数据透视表、图表，因此您可以构建无与伦比、信息清晰的报表。

获取DevExpress Reporting最新正式版下载(Q技术交流：532598169）

为什么选择Node.js和WebAssembly？

自定义DevExpress报表(在后端应用程序中)可能会给刚接触 .NET的前端Web开发人员带来独特的挑战，在本文中我们将向您展示.NET和WebAssembly集成是如何帮助解决这些挑战，并增强整体应用程序的安全性和性能的。

传统的报表开发/定制方法需要 .NET和相关语言的专业知识，但WebAssembly消除了这个困难。通过在WASM环境中运行.NET应用程序，开发人员无需深入了解.NET就可以将交互式报表集成到Node.js应用程序中。

这种集成的第二个好处与安全性有关，WebAssembly在隔离的环境中执行代码。因此开发人员可以完全控制磁盘、网络和其他关键资源，这种隔离的执行环境可以降低与未授权访问相关的风险。

Microsoft在最近的.NET更新中一直致力于 .NET 和WebAssembly的集成，在.NET 7中，Micrsooft引入了CLI模板(如wasmconsole和wasmbrowser)，并允许开发人员创建在承载.NET运行时的沙盒WebAssembly环境中运行的控制台和web应用程序。

随着.NET 8的发布，应用程序代码在编译时直接转换为WebAssembly，这一变化带来了与性能相关的显著改进，其特点是延迟减少、用户界面响应更快。

如果您是一个刚接触.NET的前端Web开发人员，并且对这篇内容感兴趣，建议创建一个应用程序，允许创建DevExpress报表并将其导出为PDF文件。

开始前
  • 安装 .NET 8 SDK。
  • 安装最新的CLI模板：

>dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates::8.0.3

  • 安装wasm-tools工作负载：

>dotnet workload install wasm-tools

创建一个简单的Wasmconsole应用

运行以下命令创建一个示例wasm-export应用：

>dotnet new wasmconsole -o wasm-exporter

当示例项目准备好后，导航到项目文件夹：

>cd wasm-exporter

Program.cs文件包含以下代码：

using System;
using System.Runtime.InteropServices.JavaScript;Console.WriteLine("Hello, Console!");return 0;public partial class MyClass
{
[JSExport]
internal static string Greeting()
{
var text = $"Hello, World! Greetings from node version: {GetNodeVersion()}";
return text;
}[JSImport("node.process.version", "main.mjs")]
internal static partial string GetNodeVersion();
}

如您所见，JavaScript导入Greeting .NET函数，而.NET本身导入一个函数，该函数显示当前安装的Node.js版本。

反过来，代码在main.mjs文件加载.NET运行时并将JavaScript函数导入WebAssembly：

import { dotnet } from './_framework/dotnet.js'const { setModuleImports, getAssemblyExports, getConfig } = await dotnet
.withDiagnosticTracing(false)
.create();setModuleImports('main.mjs', {
node: {
process: {
version: () => globalThis.process.version
}
}
});const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);await dotnet.run();

一旦您使用了dotnet build命令构建了这个应用程序，运行它的方式与您通常运行node.js应用程序的方式相同，来查看两个函数的执行结果：

>dotnet build
>node main.mjs
Hello, World! Greetings from node version: v18.12.1
Hello, Console!

通过指定配置设置创建DevExpress报表

对于未安装DevExpress的macOS/Linux或Windows操作系统，请执行以下操作：

  • 创建一个nuget.config文件：

dotnet new nugetconfig

  • 删除nuget.config文件中的“clear /”
  • 更新add key="nuget" value="https://api.nuget.org/v3/index.json" ，并将nuget键替换为自定义提要名称，并将该值替换为从DevExpress NuGet Gallery页面获得的DevExpress NuGet Feed URL。

完成后，安装在WebAssembly应用程序中创建文档所需的NuGet包：

dotnet add package Newtonsoft.Json
dotnet add package DevExpress.Drawing.Skia --version 23.2.*-*
dotnet add package DevExpress.Reporting.Core --version 23.2.*-*
dotnet add package SkiaSharp.HarfBuzz --version 2.88.7
dotnet add package SkiaSharp.NativeAssets.WebAssembly --version 2.88.7
dotnet add package HarfBuzzSharp.NativeAssets.WebAssembly --version 2.8.2.4
dotnet add package SkiaSharp.Views.Blazor --version 2.88.7

在项目配置文件(wasm- exporters .csproj)中添加一个本地SkiaSharp依赖项：

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

指定生成的可执行文件和库的路径：

<wasmappdir>./result</wasmappdir>

在这一点上，我们完成了准备工作，并准备开始编码。

我们的应用程序由两个部分组成：一个基于.NET服务器的应用程序编译成程序集，一个JavaScript客户端应用程序创建并配置.NET运行时环境，以便在WASM中运行该程序集。

.NET解决方案

在您喜欢的代码编辑器中打开文件夹，在Program.cs代码单元中实现以下类：ReportExporter、JsonSourceCustomizationService和SimplifiedUriJsonSource：

using System;
using System.Collections.Generic;
using System.ComponentModel.Design;
using System.IO;
using System.Reflection;
using System.Runtime.InteropServices.JavaScript;
using System.Threading;
using System.Threading.Tasks;
using DevExpress.Data;
using DevExpress.DataAccess.Json;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;return 0;public partial class ReportExporter {
[JSExport]
internal static async Task ExportToPdfAsync(JSObject exportModel, JSObject result) {
using var report = new XtraReport();
((IServiceContainer)report).AddService(typeof(IJsonSourceCustomizationService), new JsonSourceCustomizationService());using var reportStream = new MemoryStream(exportModel.GetPropertyAsByteArray("reportXml"));
report.LoadLayoutFromXml(reportStream, true);PdfExportOptions pdfOptions = report.ExportOptions.Pdf;
if(exportModel.HasProperty("exportOptions")) {
SimplifiedFillExportOptions(pdfOptions, exportModel.GetPropertyAsJSObject("exportOptions"));
}using var resultStream = new MemoryStream();
await report.ExportToPdfAsync(resultStream, pdfOptions);
result.SetProperty("pdf", resultStream.ToArray());
resultStream.Close();
}static void SimplifiedFillExportOptions(object exportOptions, JSObject jsExportOptions) {
PropertyInfo[] propInfos = exportOptions.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance);
foreach(PropertyInfo pi in propInfos) {
if(!jsExportOptions.HasProperty(pi.Name))
continue;if(pi.PropertyType == typeof(bool)) {
pi.SetValue(exportOptions, jsExportOptions.GetPropertyAsBoolean(pi.Name));} else if(pi.PropertyType == typeof(string)) {
pi.SetValue(exportOptions, jsExportOptions.GetPropertyAsString(pi.Name));} else if(pi.PropertyType.IsEnum) {
string val = jsExportOptions.GetPropertyAsString(pi.Name);
if(Enum.IsDefined(pi.PropertyType, val)) {
pi.SetValue(exportOptions, Enum.Parse(pi.PropertyType, val));
}} else if(pi.PropertyType.IsClass) {
SimplifiedFillExportOptions(pi.GetValue(exportOptions), jsExportOptions.GetPropertyAsJSObject(pi.Name));
}
}
}
}
public class JsonSourceCustomizationService : IJsonSourceCustomizationService {
public JsonSourceBase CustomizeJsonSource(JsonDataSource jsonDataSource) {
return jsonDataSource.JsonSource is UriJsonSource uriJsonSource ? new SimplifiedUriJsonSource(uriJsonSource.Uri) : jsonDataSource.JsonSource;
}
}
public partial class SimplifiedUriJsonSource : UriJsonSource {
public SimplifiedUriJsonSource(Uri uri) : base(uri) { }
public override Task GetJsonStringAsync(IEnumerable sourceParameters, CancellationToken cancellationToken) {
return GetJsonData(Uri.ToString());
}
[JSImport("getJsonData", "main.mjs")]
internal static partial Task GetJsonData(string url);
}

ReportExporter

该类实现ExportToPdfAsync方法并将其导出到JavaScript模块，该方法创建一个XtraReport实例，将JsonSourceCustomizationService自定义服务添加到报表对象模型，并将可选的导出选项从javascript对象映射到本地.NET对象，使用XtraReport.ExportToPdfAsync方法将报表导出为PDF。

JsonSourceCustomizationService

这个服务取代了JsonDataSource.JsonSource值，使用满足Blazor限制的自定义对象。这是因为WebAssembly不允许HTTP请求，而报表模型可能会引用带有URI的JSON源。

SimplifiedUriJsonSource

该类是UriJsonSource类的后代，并将HTTP请求重定向到应用程序的javascript段。

JavaScript实现

main.mjs文件是应用程序的核心JS段，将其内容替换为以下代码：

// Import necessary modules.
import { dotnet } from '._framework/dotnet.js';
import fs from 'fs';
import { get as httpGet } from 'http';
import { get as httpsGet } from 'https';
import url from 'url'// Configure .NET runtime for WASM execution.
const { setModuleImports, getAssemblyExports, getConfig } = await dotnet
.withDiagnosticTracing(false)
.create();
setModuleImports('main.mjs', { getJsonData });// Retrieve the exported methods from the WASM part.
const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);// Prepare the report model and related options.
const repx = fs.readFileSync('../reports/report1.repx');
const model = {
reportXml: repx,
exportOptions: {
DocumentOptions: {
Application: "WASM",
Subject: "wasm integration"
},
PdfUACompatibility: "PdfUA1"
}
}// Export the report to PDF.
const result = {};
await exports.ReportExporter.ExportToPdfAsync(model, result);
const buffer = Buffer.from(result.pdf);
fs.writeFileSync('result.pdf', buffer);// Define a method to fetch JSON data from a given URL.
function getJsonData(jsonUrl) {
return new Promise((resolve) => {
const fetchMethod = url.parse(jsonUrl).protocol === 'https:' ? httpsGet : httpGet;
fetchMethod(jsonUrl, res => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => resolve(data));
}).on('error', err => resolve(''));
});
}// Initiate the .NET runtime.
await dotnet.run();

该文件中的代码：

  • 在WASM中配置 .NET 运行时。
  • 导入getJsonData()函数来从URL检索JSON文件。
  • 调用并执行ExportToPdfAsync方法来生成PDF文档。
  • 使用本地Node.js函数保存生成的PDF文件。
查看结果

要运行应用程序，首先构建.NET应用程序，导航到result文件夹，然后运行JavaScript应用程序：

>dotnet build
>cd result
>node main.mjs

应用程序在结果目录中创建一个新的result.pdf文件。

使用DevExpress Web文档查看器和报表设计器

按照readme文件中列出的步骤，运行后端和客户端应用程序，并将浏览器指向客户端应用程序中指定的URL。结果将显示如下：

DevExpress XAF (WinForms UI)实用案例图

更多DevExpress线上公开课、中文教程资讯请上中文网获取

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/660839.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何查看我的Docker 容器和 `app.py` 脚本有足够的权限来读取 `config.json` 文件

如何查看我的Docker 容器和 `app.py` 脚本有足够的权限来读取 `config.json` 文件

要检查 Docker 容器和 app.py 脚本是否具有读取 config.json 文件的足够权限&#xff0c;你可以按照以下步骤操作&#xff1a; 检查宿主机上的文件权限&#xff1a; 在宿主机上&#xff0c;使用 ls -l 命令查看 config.json 文件的权限。 ls -l /path/to/config.json确保该文件…
阅读更多...
【webrtc】MessageHandler 7： 基于线程的消息处理：切换main线程向observer发出通知

【webrtc】MessageHandler 7： 基于线程的消息处理：切换main线程向observer发出通知

以当前线程作为main线程 RemoteAudioSource 作为一个handler 仅实现一个退出清理的功能 首先on message的处理会切换到main 线程 ：main_thread_其次，这里在main 线程对sink_ 做清理再次，在main 线程做出状态改变，并能通知给所有的observer 做出on changed 行为。对接mediac…
阅读更多...
预编码算法学习笔记

预编码算法学习笔记

文章目录 1. 基本原理2. 常见应用2.1 自编码器2.2 变分自编码器2.3 稀疏自编码器 3. 学习笔记 在机器学习领域&#xff0c;预编码算法是一种强大的工具&#xff0c;用于将高维数据映射到低维表示&#xff0c;从而提取数据中的重要特征。本文将介绍预编码算法的基本原理、常见应…
阅读更多...
.net core ef 连表查询

.net core ef 连表查询

Information和TypeInfo连表查询 类似&#xff1a; select st.Title1,si.* from [Star_Information] si left join Star_TypeInfo st on si.typeId2st.id 先在EfCoreDbContext.cs配置 protected override void OnModelCreating(ModelBuilder builder){base.OnModelCreating(b…
阅读更多...
anaconda的安装和Jupyter Notebook修改默认路径

anaconda的安装和Jupyter Notebook修改默认路径

anaconda的安装 就一个注意事项:在结尾时候记得配置系统环境变量 要是没有配置这个环境变量,后面就不能cmd启动Jupyter Notebook Jupyter Notebook修改默认路径 我们要找到Jupyter Notebook的配置文件 输入下面指令 jupyter notebook --generate-config就可以找到存放配置文…
阅读更多...
一文解决ArcGIS生成点和管段 含案例讲解

一文解决ArcGIS生成点和管段 含案例讲解

背景 在工作中&#xff0c;我们经常遇到要将坐标数据导入 GIS&#xff0c;生成点位&#xff0c;若是地理坐标系&#xff08;经纬度&#xff09;&#xff0c;那么直接用 arcgis或者QGIS 导入数据就行了&#xff0c;可实际中总会遇到各种问题&#xff1a; 坐标数据集为大地 200…
阅读更多...
如何在iPhone上恢复出厂设置后恢复数据

如何在iPhone上恢复出厂设置后恢复数据

你不想让这种情况发生&#xff0c;但它确实发生了。您必须将iPhone恢复出厂设置。当您的 iPhone 上出现软件问题且无法修复时&#xff0c;可能会发生这种情况。相反&#xff0c;在更新期间&#xff0c;或者您的iPhone遇到问题时&#xff0c;iPhone上的数据不再存在。 不过不用…
阅读更多...
8 聚类算法

8 聚类算法

目录 0 背景 1 Kmeans 1.1 聚类数量k的确定 2 DBSCAN 2.1 三个点 2.2 算法流程 3 层次聚类 3.1 过程 4 基于分布的聚类:高斯混合模型 0 背景 聚类算法是一种无监督学习技术&#xff0c;用于将数据集中的数据点划分为不同的组或簇&#xff0c;使得同一组内的数据点彼此相…
阅读更多...
jenkins转载文本

jenkins转载文本

基于Docker容器DevOps应用方案 企业业务代码发布系统 一、企业业务代码发布方式 1.1 传统方式 以物理机或虚拟机为颗粒度部署部署环境比较复杂&#xff0c;需要有先进的自动化运维手段出现问题后重新部署成本大&#xff0c;一般采用集群方式部署部署后以静态方式展现 1.2 容…
阅读更多...
设计模式之代理模式ProxyPattern（六）

设计模式之代理模式ProxyPattern（六）

一、代理模式介绍 1、什么是代理模式&#xff1f; 代理模式是一种结构型设计模式&#xff0c;它允许为其他对象提供一个替代品或占位符&#xff0c;以控制对这个对象的访问。 2、代理模式的角色构成 抽象主题&#xff08;Subject&#xff09;&#xff1a;定义了真实主题和代…
阅读更多...
R语言的学习——day1

R语言的学习——day1

将数据框中某一列数据改成行名 代码 结果
阅读更多...
用 PyTorch 构建液态神经网络（LNN）

用 PyTorch 构建液态神经网络（LNN）

用 PyTorch 构建液态神经网络&#xff08;LNN&#xff09; 文章目录 什么是液态神经网络为什么需要液态神经网络LNN 与 RNN 的区别用 PyTorch 实现 LNNStep 1. 导入必要的库Step 2. 定义网络架构Step 3. 实现 ODE 求解器Step 4. 定义训练逻辑 LNN 的缺陷总结 什么是液态神经网络…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023