纯JS集成Activereports(.Net5)

今天分享使用Activereports创建一个Asp.Net Core应用程序在JSviewer中显示报表。

1、使用ASP.NET Core Web模板创建一个 ASP.NET Core Web 应用程序

选择core框架——.net 5

项目创建完成

2、将 JSViewer 添加到应用程序。

- 打开工具菜单 > NuGet 包管理器并在包管理器控制台中运行以下命令：
  npm install @grapecity/ar-viewer
- 将安装在node_modules文件夹中的“jsViewer.min.js”和“jsViewer.min.css”文件分别复制到应用程序中的wwwroot\js和 wwwroot\ css文件夹。

3、新建一个Reports文件并添加设计好的报表文件

4、将“Index.cshtml”中的完整代码替换为以下内容

代码如下：

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ActiveReports JSViewer</title>
    <link href="~/css/jsViewer.min.css" rel="stylesheet" />
</head>
<body>
    <div id="viewer-id" style="width: 100%; height:1000px;">
    </div>
    <!--reference to js file-->
    <script src="~/js/jsViewer.min.js"></script>
    <script type="text/javascript">
        GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-id',
            reportService: {
                url: 'api/reporting',
            },
            reportID: 'table-json.rdlx',
            settings: {
                zoomType: 'FitPage'
            },
        });
    </script>
</body>
</html>

5、管理Nuget程序包，添加GrapeCity.ActiveReports.Aspnetcore.Viewer的引用

添加的时候选择的版本选择机器中对应安装的Activereports的大版本

6、修改Startup.cs的 Configure(IApplicationBuilder app, IWebHostEnvironment env) 方法

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Error");
                // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
                app.UseHsts();
            }
            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseReporting(settings =>
            {
                settings.UseFileStore(new System.IO.DirectoryInfo(env.ContentRootPath + @"\Reports\"));
            });
            app.UseRouting();
            app.UseAuthorization();
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapRazorPages();
            });
        }

7、启动项目

页面树结构

纯JS集成Activereports(.Net5)