報(bào)表控件stimulsoft操作：使用 Angular 應(yīng)用程序的報(bào)告查看器組件

翻譯|使用教程|編輯：吉煒煒|2025-03-10 16:40:28.250|閱讀 107 次

概述：本文將探討如何使用嵌入式查看器組件在 ASP.NET Core Web 應(yīng)用程序中創(chuàng)建報(bào)告和儀表板的示例。

相關(guān)鏈接：

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

Stimulsoft Reports 最新下載

介紹

報(bào)告和儀表板查看器是用于查看文檔的專用組件。它完全可定制、速度快、用戶友好，提供多種功能。為了確保無(wú)縫集成到項(xiàng)目中，我們?yōu)閼?yīng)用程序的外觀和功能提供了多種主題和自定義選項(xiàng)。

入門

打開 Visual Studio 并轉(zhuǎn)到文件菜單。選擇新建，然后選擇項(xiàng)目。接下來(lái)，選擇ASP.NET Core Web 應(yīng)用程序并單擊下一步。

現(xiàn)在，指定項(xiàng)目名稱、位置和解決方案名稱（例如AngularViewer），然后單擊創(chuàng)建。

繼續(xù)選擇平臺(tái)：在此示例中，選擇 .NET 8 或更高版本。確保禁用配置 HTTPS選項(xiàng)，然后單擊創(chuàng)建。

安裝 NuGet 包

您可以，安裝Stimulsoft.Reports.Angular.NetCore NuGet 包：

在項(xiàng)目的上下文菜單中，選擇管理 NuGet 包；
選擇一個(gè)元素并指定包版本；
單擊“安裝”。

接下來(lái)，您需要按照以下步驟將ViewerController添加到Controllers文件夾：

打開Controllers文件夾的上下文菜單并選擇添加項(xiàng)目；
選擇控制器...并將控制器類型設(shè)置為MVC 控制器 – 空；
單擊添加并輸入控制器名稱，例如ViewerController；
再次單擊“添加” 。

接下來(lái)，繼續(xù)處理報(bào)告：在項(xiàng)目中創(chuàng)建一個(gè)Reports文件夾，創(chuàng)建一個(gè)模板，例如MasterDetail.mrt ，并在ViewerController.cs中插入以下代碼：
ViewController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Stimulsoft.Report;
using Stimulsoft.Report.Angular;
using Stimulsoft.Report.Web;

namespace AngularViewer.Controllers
{
    [Controller]
    public class ViewerController : Controller
    {
        static ViewerController()
        {
            // How to Activate
            //Stimulsoft.Base.StiLicense.Key = "6vJhGtLLLz2GNviWmUTrhSqnO...";
            //Stimulsoft.Base.StiLicense.LoadFromFile("license.key");
            //Stimulsoft.Base.StiLicense.LoadFromStream(stream);
        }

        [HttpPost]
        public IActionResult InitViewer()
        {
            var requestParams = StiAngularViewer.GetRequestParams(this);

            var options = new StiAngularViewerOptions();
            options.Actions.GetReport = "GetReport";
            options.Actions.ViewerEvent = "ViewerEvent";
            options.Appearance.ScrollbarsMode = true;

            return StiAngularViewer.ViewerDataResult(requestParams, options);
        }

        [HttpPost]
        public IActionResult GetReport()
        {
            var report = StiReport.CreateNewReport();
            var path = StiAngularHelper.MapPath(this, $"Reports/MasterDetail.mrt");
            report.Load(path);

            return StiAngularViewer.GetReportResult(this, report);
        }

        [HttpPost]
        public IActionResult ViewerEvent()
        {
            return StiAngularViewer.ViewerEventResult(this);
        }
    }
}

此外，您還應(yīng)通過(guò)啟用 CORS 策略和定義 Angular 的回退機(jī)制來(lái)配置 .NET 服務(wù)器。這應(yīng)在Program.cs文件中完成。

Program.cs

using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(policy =>
    {
        policy.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod();
    });
});

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
}

app.UseDefaultFiles();
app.UseStaticFiles();

app.UseRouting();
app.UseCors();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Use(async (context, next) =>
{
    await next();
    if (context.Response.StatusCode == 404 && !context.Request.Path.Value.StartsWith("/api"))
    {
        context.Request.Path = "/index.html";
        await next();
    }
});

app.Run();

接下來(lái)，在文件資源管理器 中打開項(xiàng)目文件夾，并使用npm安裝必要的 Angular-client 組件。

控制臺(tái)

npm install stimulsoft-viewer-angular

關(guān)閉控制臺(tái)，刪除ClientApp文件夾，重新打開控制臺(tái)，輸入以下命令：

Console

ng new ClientApp

選擇CSS格式，按Enter，關(guān)閉控制臺(tái)，然后導(dǎo)航到ClientApp文件夾。

再次打開控制臺(tái)并安裝stimulsoft-viewer-angular :

控制臺(tái)

npm install stimulsoft-viewer-angular

關(guān)閉控制臺(tái)。在文本編輯器中打開目錄“ ...ClientApp\src\app\ ”中的app.module.ts文件并添加StimulsoftViewerModule。然后將以下代碼插入app.module.ts：app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StimulsoftViewerModule } from 'stimulsoft-viewer-angular';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StimulsoftViewerModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在文本編輯器中打開目錄“ ...ClientApp\src\app\ ”中的app.component.html文件并添加AppComponent。然后將以下代碼插入app.component.html：app.component.html

<stimulsoft-viewer-angular
  [requestUrl]="'//localhost:5151/Viewer/{action}'"
  [action]="'InitViewer'"
  [height]="'100vh'"
></stimulsoft-viewer-angular>

轉(zhuǎn)到 Visual Studio 并運(yùn)行項(xiàng)目。您將看到一個(gè)帶有指定報(bào)告的查看器。

---------------------------------------------------------------------------

關(guān)于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務(wù)商。在軟件工程領(lǐng)域，我們提供開發(fā)控件、研發(fā)管理、代碼開發(fā)、部署運(yùn)維等軟件開發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購(gòu)、技術(shù)選型、個(gè)性化維保等服務(wù)，幫助客戶實(shí)現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險(xiǎn)可控。慧都科技是Stimulsoft的在中國(guó)區(qū)的合作伙伴，Stimulsoft作為圖表報(bào)表領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)實(shí)現(xiàn)輕松構(gòu)建高性能的表格報(bào)告及圖表。

下載|體驗(yàn)更多Stimulsoft產(chǎn)品，請(qǐng)咨詢，或撥打產(chǎn)品熱線：023-68661681