彩票走势图

Stimulsof 教程:使用 Angular 应用程序的报表设计器组件

翻译|行业资讯|编辑:胡涛|2024-12-10 11:02:57.510|阅读 3 次

概述:在本文中,我们将讨论使用嵌入式设计器组件在 .NET Core 和 ASP.NET MVC(.NET Framework 4.7.2)服务器端平台上运行的 Angular 应用程序中创建报告和仪表板的功能。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

在本文中,我们将讨论使用嵌入式设计器组件在 .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包含了所有内容!

Stimulsoft Reports 最新下载 

介绍

报告和仪表板设计器在设计时充分考虑了 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

Angular 组件的集成

安装软件包后,首先在项目文件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

之后,运行该应用程序。

在 .NET Framework 4.7.2 上的 ASP.NET MVC 应用程序中集成设计器

要将报表设计器集成到应用程序中,您需要先导入脚本:

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 应用程序中

以下是将报表设计器集成到 .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@capbkgr.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP