ActiveReports 支持与 ASP.Net MVC 中集成并使用JSViewer用来展示报表。本节就来分享如何展示将ActiveReports 集成到MVC 项目中。
在新建项目之前要确定已经安装了 Node.js
如果使用的是 ASP.NET MVC 需要使用 Visual Studio 2013及以上,但如果使用的 .Net Core MVC 需要使用 Visual Studio 2019 以上 |
添加步骤如图,右键单击项目名称->管理 Nuget程序包→输入 GrapeCity.ActiveReports.Aspnet.Viewer ,选择安装
ASP.NET MVC 添加需要的引用:GrapeCity.ActiveReports.Aspnet.Viewer
如果是.Net Core 项目安装:GrapeCity.ActiveReports.AspnetCore.Viewer
在Startup1.cs中输入以下代码信息:
public class Startup1 { public static string EmbeddedReportsPrefix = "XXXX"; public void Configuration(IAppBuilder app) { app.UseReporting(settings => { settings.UseFileStore(new DirectoryInfo(String.Format(@"{0}.\Reports\", System.Web.HttpRuntime.AppDomainAppPath))); }); RouteTable.Routes.RouteExistingFiles = true; } } |
如果输入app.UseReporting 报错,需要将在当前类添加using |
3. 添加一个新的Reports文件夹,存放设计好的报表或添加新的报表文件
获取 JSViewer需要的资源文件
2 设置js和css 文件属性 复制到输出目录 为始终复制,生成操作为嵌入的资源
<link href="~/Scripts/jsViewer.min.css" rel="stylesheet" /> <script src="~/Scripts/jsViewer.min.js"></script> </head> <body> <!--Add the DIV element that will contain the JSViewer in the target HTML page--> <div style="float:right;width:100% ;height:800px" id="viewerContainer"> </div> </body> |
2. 添加 js脚本用于初始化JSViewer
<script type="text/javascript"> var viewer = GrapeCity.ActiveReports.JSViewer.create({ element: '#viewerContainer', reportID: 'RdlReport1.rdlx', // the id of the report to display availableExports: ['Xml', 'Pdf', 'Excel'], reportService: {} // other properties }); </script> |
完整页面的代码:
@{ ViewBag.Title = "Home Page"; } <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--Add the references to these files to the target HTML page--> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.4.85/css/materialdesignicons.min.css"> <link rel="stylesheet" href="https://fonts.cat.net/css?family=Open+Sans:400,300,600,700" type="text/css"> <link rel="stylesheet" href="Scripts/jsViewer.min.css" type="text/css"> <link href="~/Scripts/jsViewer.min.css" rel="stylesheet" /> <script src="~/Scripts/jsViewer.min.js"></script> </head> <body> <!--Add the DIV element that will contain the JSViewer in the target HTML page--> <div style="float:right;width:100% ;height:800px" id="viewerContainer"> </div> </body> </html> <!--Add the code that initializes and passes the parameters in the JSViewer instance. The code might vary depending on the technology used to develop the JSViewer component. The example of code for the pure javascript component:--> <script type="text/javascript"> var viewer = GrapeCity.ActiveReports.JSViewer.create({ element: '#viewerContainer', reportID: 'RdlReport1.rdlx', // the id of the report to display availableExports: ['Xml', 'Pdf', 'Excel'], reportService: {} // other properties }); </script> |
到这儿基本的步骤就完成了,可以直接跑起来运行了。
2. 如果运行后发现JSViewer 工具栏被遮挡,可修改 Views→ Share→Layout.cshtml 模板页的,删除不必要的 div元素。
3. JSViewer 默认是加载 Custom.json 文件设置工具栏等资源的语言的,所以如果要本地化 JSViewer资源,可修改此文件后在 JSViewer初始化过程中
4、如果出现 "未找到报表文件 RdlReport1.rdlx"
如需寻求在线帮助,请访问 ActiveReports 求助中心 如需了解更多ActiveReports产品特性,请访问 ActiveReports 官方网站 ActiveReports 官方技术交流群:109783140 下载产品体验产品功能:http://www.gcpowertools.com.cn/products/download.aspx?pid=16 |