当前位置: 首页 > news >正文

报表控件stimulsoft操作:使用 Angular 应用程序的报告查看器组件

Stimulsoft Ultimate (原Stimulsoft Reports.Ultimate)是用于创建报表和仪表板的通用工具集。该产品包括用于WinForms、ASP.NET、.NET Core、JavaScript、WPF、PHP、Java和其他环境的完整工具集。无需比较产品功能,Stimulsoft Ultimate包含了所有内容!

Stimulsoft Reports 最新版下载 

介绍

报告和仪表板查看器是用于查看文档的专用组件。它完全可定制、速度快、用户友好,提供多种功能。为了确保无缝集成到项目中,我们为应用程序的外观和功能提供了多种主题和自定义选项。

入门

打开 Visual Studio 并转到文件菜单。选择新建,然后选择项目。接下来,选择ASP.NET Core Web 应用程序并单击下一步

现在,指定项目名称、位置和解决方案名称(例如AngularViewer),然后单击创建

继续选择平台:在此示例中,选择 .NET 8 或更高版本。确保禁用配置 HTTPS选项,然后单击创建

安装 NuGet 包

您可以联系慧都在线客服,安装Stimulsoft.Reports.Angular.NetCore NuGet 包:

  • 在项目的上下文菜单中,选择管理 NuGet 包
  • 选择一个元素并指定包版本;
  • 单击“安装”

接下来,您需要按照以下步骤将ViewerController添加到Controllers文件夹:

  • 打开Controllers文件夹的上下文菜单并选择添加项目
  • 选择控制器...并将控制器类型设置为MVC 控制器 – 空
  • 单击添加并输入控制器名称,例如ViewerController
  • 再次单击“添加” 。

接下来,继续处理报告:在项目中创建一个Reports文件夹,创建一个模板,例如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);
        }
    }
}

此外,您还应通过启用 CORS 策略和定义 Angular 的回退机制来配置 .NET 服务器。这应在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();

接下来,在文件资源管理器 中打开项目文件夹,并使用npm安装必要的 Angular-client 组件。

控制台

npm install stimulsoft-viewer-angular

关闭控制台,删除ClientApp文件夹,重新打开控制台,输入以下命令:

Console

ng new ClientApp

选择CSS格式,按Enter,关闭控制台,然后导航到ClientApp文件夹。

再次打开控制台并安装stimulsoft-viewer-angular :

控制台

npm install stimulsoft-viewer-angular

关闭控制台。在文本编辑器中打开目录“ ...ClientApp\src\app\ ”中的app.module.ts文件并添加StimulsoftViewerModule。然后将以下代码插入app.module.tsapp.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.htmlapp.component.html

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

转到 Visual Studio 并运行项目。您将看到一个带有指定报告的查看器。

http://www.dtcms.com/a/61866.html

相关文章:

  • ngx_openssl_create_conf
  • Zookeeper实践指南
  • BI 工具响应慢?可能是 OLAP 层拖了后腿
  • 【报错】微信小程序预览报错”60001“
  • unity使用mesh 画图(1)
  • Spring 事务和事务传播机制
  • 接口测试笔记
  • C语言(23)
  • Flutter 学习之旅 之 flutter 使用flutter_native_splash 简单实现设备启动短暂白屏黑屏(闪屏)的问题
  • matlab慕课学习3.1
  • Flutter中网络图片加载显示Image.network的具体用法
  • QwQ-32B通用能力测评的详细分析
  • Word 小黑第2套
  • Caffeine搭建源码环境
  • React路由与数据流革命(五):从URL到数据管道的全栈实践
  • 【数据结构 C 语言实现】堆和优先队列
  • 警惕AI神话破灭:深度解析大模型缺陷与禁用场景指南
  • 关于VScode终端无法识别外部命令
  • 如何使用Postman,通过Mock的方式测试我们的API
  • 【Kubernets】Kubernetes 的基础知识,Pod是什么? 和容器的关系?多个容器如何在同一个 Pod 里协作?
  • 【CXX】6.2 str — rust::Str
  • 几种linux获取系统运行时间的方法
  • Webservice创建
  • 技术进阶:数字人分身克隆系统源码+DeepSeek,实现前沿虚拟数字人应用的交互升级
  • 02.06、回文链表
  • 《深入浅出数据索引》- 公司内部培训课程笔记
  • 【MySQL_04】数据库基本操作(用户管理--配置文件--远程连接--数据库信息查看、创建、删除)
  • 【2025年28期免费获取股票数据API接口】实例演示五种主流语言获取股票行情api接口之沪深A股强势股池数据获取实例演示及接口API说明文档
  • 面试java做了一道逻辑题,人麻了
  • 你使用过哪些 Java 并发工具类?