今天分享使用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、启动项目