在本文中，我們將討論使用嵌入式設(shè)計器組件在 .NET Core 和 ASP.NET MVC（.NET Framework 4.7.2）服務(wù)器端平臺上運(yùn)行的 Angular 應(yīng)用程序中創(chuàng)建報告和儀表板的功能。

Stimulsoft Ultimate （原Stimulsoft Reports.Ultimate）是用于創(chuàng)建報表和儀表板的通用工具集。該產(chǎn)品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他環(huán)境的完整工具集。無需比較產(chǎn)品功能，Stimulsoft Ultimate包含了所有內(nèi)容！

Stimulsoft Reports 最新下載 

介紹

報告和儀表板設(shè)計器在設(shè)計時充分考慮了 Angular 框架的具體特點(diǎn)，支持主題、界面本地化以及使用報告組件所需的全套事件。該組件與 Angular 框架的所有當(dāng)前版本兼容（截至撰寫本文時，這些版本為 16、17 和 18）。

入門

控制臺的 npm 包

npm install stimulsoft-designer-angular

此外，對于項(xiàng)目的服務(wù)器端，您需要安裝 NuGet 包或。

控制臺

dotnet add package Stimulsoft.Dashboards.Angular.NetCore
dotnet add package Stimulsoft.Reports.Angular.NetCore

Angular 組件的集成

安裝軟件包后，首先在項(xiàng)目文件app.module.ts中導(dǎo)入 Stimulsoft 組件：

app.module.ts

...

import { StimulsoftDesignerModule } from 'stimulsoft-designer-angular';

@NgModule({
declarations: [
AppComponent
],
imports: [
...

StimulsoftDesignerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

然后，在文件app.component.html中，定義查看器和設(shè)計器組件的參數(shù)

。app.component.html

<stimulsoft-designer-angular
#designer
[requestUrl]="'//localhost:60801/api/designer'"
[height]="'100%'"
[width]="'100%'">
Loading designer...
</stimulsoft-designer-angula

之后，運(yùn)行該應(yīng)用程序。

在 .NET Framework 4.7.2 上的 ASP.NET MVC 應(yīng)用程序中集成設(shè)計器

要將報表設(shè)計器集成到應(yīng)用程序中，您需要先導(dǎo)入腳本：

using Stimulsoft.Report;
using Stimulsoft.Report.Mvc;
using Stimulsoft.Report.Web;

...

并初始化設(shè)計器：

...

[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);
}

...

并創(chuàng)建保存報告的方法：

...

public ActionResult SaveReport()
{
var report = StiMvcDesigner.GetReportObject();

var path = Server.MapPath("~/Reports/MasterDetail.mrt");
report.Save(path);

return StiMvcDesigner.SaveReportResult();
}

...

下載示例。

將設(shè)計器集成到 .NET Core 應(yīng)用程序中

以下是將報表設(shè)計器集成到 .NET Core 服務(wù)器上的 Angular 應(yīng)用程序中的分步指南。在此示例中，我們將向您展示報表加載和保存事件的使用。讓

我們?yōu)樵O(shè)計器創(chuàng)建一個控制器，描述操作 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，歡迎相互交流