在本文中，我们将讨论使用嵌入式设计器组件在 .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 包Stimulsoft.Dashboards.Angular.NetCore或Stimulsoft.Reports.Angular.NetCore。

控制台

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]="'http://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，欢迎相互交流