在本文中，我们将讨论使用嵌入式设计器组件在 .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);
}
}
}
您可以在此处 下载示例。