提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|行业资讯|编辑:胡涛|2024-12-10 11:02:57.510|阅读 135 次
概述:在本文中,我们将讨论使用嵌入式设计器组件在 .NET Core 和 ASP.NET MVC(.NET Framework 4.7.2)服务器端平台上运行的 Angular 应用程序中创建报告和仪表板的功能。
#慧都22周年庆大促·界面/图表报表/文档/IDE/IOT/测试等千款热门软控件火热促销中>>
在本文中,我们将讨论使用嵌入式设计器组件在 .NET Core 和 ASP.NET MVC(.NET Framework 4.7.2)服务器端平台上运行的 Angular 应用程序中创建报告和仪表板的功能。
Stimulsoft Ultimate (原Stimulsoft Reports.Ultimate)是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能,Stimulsoft Ultimate包含了所有内容!
报告和仪表板设计器在设计时充分考虑了 Angular 框架的具体特点,支持主题、界面本地化以及使用报告组件所需的全套事件。该组件与 Angular 框架的所有当前版本兼容(截至撰写本文时,这些版本为 16、17 和 18)。
控制台的 npm 包
npm install stimulsoft-designer-angular
此外,对于项目的服务器端,您需要安装 NuGet 包或。
dotnet add package Stimulsoft.Dashboards.Angular.NetCore dotnet add package Stimulsoft.Reports.Angular.NetCore
安装软件包后,首先在项目文件app.module.ts中导入 Stimulsoft 组件:
app.module.ts
...
import { StimulsoftDesignerModule } from 'stimulsoft-designer-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
StimulsoftDesignerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
然后,在文件app.component.html中,定义查看器和设计器组件的参数
。app.component.html <stimulsoft-designer-angular #designer [requestUrl]="'//localhost:60801/api/designer'" [height]="'100%'" [width]="'100%'"> Loading designer... </stimulsoft-designer-angula
之后,运行该应用程序。
要将报表设计器集成到应用程序中,您需要先导入脚本:
using Stimulsoft.Report; using Stimulsoft.Report.Mvc; using Stimulsoft.Report.Web; ...
并初始化设计器:
...
[AllowCrossSiteJson]
public ActionResult Get()
{
var requestParams = StiMvcDesigner.GetRequestParams();
if (requestParams.Action == StiAction.Undefined)
{
var options = new StiMvcDesignerOptions();
return StiMvcDesigner.GetAngularScriptsResult(requestParams, options);
}
if (requestParams.ComponentType == StiComponentType.Designer)
{
switch (requestParams.Action)
{
case StiAction.GetReport:
return GetReport();
case StiAction.SaveReport:
return SaveReport();
}
}
return StiMvcDesigner.ProcessRequestResult();
}
...
之后,使用以下代码加载报告:
...
public ActionResult GetReport()
{
var report = StiReport.CreateNewReport();
var path = Server.MapPath("~/Reports/MasterDetail.mrt");
report.Load(path);
return StiMvcDesigner.GetReportResult(report);
}
...
并创建保存报告的方法:
...
public ActionResult SaveReport()
{
var report = StiMvcDesigner.GetReportObject();
var path = Server.MapPath("~/Reports/MasterDetail.mrt");
report.Save(path);
return StiMvcDesigner.SaveReportResult();
}
...
下载示例。
以下是将报表设计器集成到 .NET Core 服务器上的 Angular 应用程序中的分步指南。在此示例中,我们将向您展示报表加载和保存事件的使用。让
我们为设计器创建一个控制器,描述操作 GetReport、SaveReport,并指定特殊的 Get 和 Post 操作。DesignerController.cs
namespace Designer.Controllers
{
[Produces("application/json")]
[Route("api/designer")]
public class DesignerController : Controller
{
static DesignerController()
{
// How to Activate
//Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
//Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
//Stimulsoft.Base.StiLicense.LoadFromStream(stream);
}
[HttpGet]
public IActionResult Get()
{
// Setting the required options on the server side
var requestParams = StiAngularDesigner.GetRequestParams(this);
if (requestParams.Action == StiAction.Undefined)
{
var options = new StiAngularDesignerOptions();
options.Height = Unit.Percentage(100);
return StiAngularDesigner.DesignerDataResult(requestParams, options);
}
return StiAngularDesigner.ProcessRequestResult(this);
}
[HttpPost]
public IActionResult Post()
{
var requestParams = StiAngularDesigner.GetRequestParams(this);
if (requestParams.ComponentType == StiComponentType.Designer)
{
switch (requestParams.Action)
{
case StiAction.GetReport:
return GetReport();
case StiAction.SaveReport:
return SaveReport();
}
}
return StiAngularDesigner.ProcessRequestResult(this);
}
public IActionResult GetReport()
{
var report = StiReport.CreateNewReport();
var path = StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt");
report.Load(path);
return StiAngularDesigner.GetReportResult(this, report);
}
public IActionResult SaveReport()
{
var report = StiAngularDesigner.GetReportObject(this);
var path = StiAngularHelper.MapPath(this, "Reports/HotelRevenue.mrt");
report.Save(path);
return StiAngularDesigner.SaveReportResult(this);
}
}
}
下载示例。
想要了解Stimulsoft Reports 报价信息的朋友,欢迎咨询慧都官方客服。
加入官方社群 740060302,欢迎相互交流
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@hmdbvip.cn




HOOPS Visualize Web使用模型树作为一种三维模型格式转换的方式,以便在Web和移动应用程序中进行展示和交互。模型树允许用户对模型进行层级操作和选择,以满足特定的需求。
自2007年以来,GeoLogismiki一直使用TeeChart Pro VCL/FMX图表库将复杂的数据转化为清晰、交互式的图形。
近日,国产化文档开发组件Spire.Office 同步更新 .NET和 Java 版本至10.10.0 !本次更新带来了多项全新功能与性能优化,为开发者提供更强大、更高效的文档、表格、PDF、演示文稿处理能力。
通过将 ActiveReportsJS Web报表设计器无缝集成到Vue项目,能实现最终用户自助设计/编辑报表,彻底告别依赖开发的繁琐流程。
相关产品
第一款可以直接在Web中编辑报表的报表生成工具
Stimulsoft Reports.Wpf针对wpf用户界面架构开发的报表工具,无需上网,即能轻松实现控件所有功能
Stimulsoft Ultimate用于创建报表和仪表板的通用工具集,支持多种报表导出格式,拥有简单且强大的报表引擎
最新文章 MORE
永利最大(官方)网站相关的文章 MORE
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@hmdbvip.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢
永利最大(官方)网站