请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

KearneyKang 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-4-1 18:15  /   查看:3625  /  回复:2
本帖最后由 KearneyKang 于 2020-5-25 11:25 编辑

由于ActiveReportsV14新增了.NetCore的功能,因此导致以前ActiveReports13中使用JSviewer的方法的方法存在一些差别。

下面我们就来详细说说在Asp.Net的项目中如何使用ActiveReportsV14的JSviewer

1、首先我们先新建一个Asp.Net 的空项目

2、 在菜单栏中>>选择工具>>NuGet包管理器>>程序包管理器控制台


3、 在程序包管理器的控制台里输入如下的命令:
install-packageMicrosoft.Owin.Host.SystemWeb –Pre

然后点击“Enter” 按钮,就会在引用中自动添加对应的引用

5、 在项目中,添加新建项,在新建项的选择栏中选择>>OWIN StartupClass

6、然后在管理NuGet程序包中添加引用
7、浏览,添加引用
ASP.NET MVC 添加需要的引用:GrapeCity.ActiveReports.Aspnet.Viewer
如果是.Net Core 项目安装:GrapeCity.ActiveReports.AspnetCore.Viewer

点击确定,就会直接安装需要的引用文件

8、修改StartUp1的配置信息:
  1. public class Startup1
  2.     {
  3.         public static string EmbeddedReportsPrefix = "XXXX";
  4.         public void Configuration(IAppBuilder app)
  5.         {
  6.             app.UseReporting(settings =>
  7.             {
  8.                 settings.UseFileStore(new DirectoryInfo(String.Format(@"{0}.\Reports", System.Web.HttpRuntime.AppDomainAppPath)));
  9.             });
  10.             RouteTable.Routes.RouteExistingFiles = true;
  11.         }
  12. }
复制代码
9、添加报表文件Reports再添加一张报表
10、添加引用文件,我这是新建了一个scripts文件夹然后把要用到的CSS和JS文件放在文件中,其中jsViewer.min.css、jsViewer.min.css在该路径下

下载ActiveReports14之后,在JS资源文件中就有需要的引用
11、添加一个新的index.html页面。然后进行页面的配置
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <!--Add the references to these files to the target HTML page-->
  7.     <link rel="stylesheet" href="https://cdn.materialdesignicons.com/2.4.85/css/materialdesignicons.min.css">
  8.     <link rel="stylesheet" href="https://fonts.cat.net/css?family=Open+Sans:400,300,600,700" type="text/css">
  9.     <link rel="stylesheet" href="scripts/jsViewer.min.css" type="text/css">
  10.     <link href="scripts/index.css" rel="stylesheet" />
  11.     <script src="scripts/jsViewer.min.js"></script>
  12. </head>
  13. <body>
  14.     <!--Add the DIV element that will contain the JSViewer in the target HTML page-->
  15.     <div style="width: 100%; overflow-x: hidden">
  16.         <div style="float:right;width:100% ;height:800px" id="viewerContainer">
  17.         </div>
  18.     </div>
  19. </body>
  20. </html>
  21. <!--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:-->
  22. <script type="text/javascript">
  23.     var viewer = GrapeCity.ActiveReports.JSViewer.create({
  24.         element: '#viewerContainer',
  25.         reportID: 'RdlReport1.rdlx', // the id of the report to display
  26.         availableExports: ['Xml', 'Pdf', 'Excel'],
  27.         reportService: {}
  28.         // other properties
  29.     });
  30. </script>
复制代码
12、新添加一个新的Web窗体,然后Web页面中添加WebViewer 具体可以参考如下这个博客进行添加:https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=74397&extra=page%3D1
13、然后找到这个Global.asax文件,注释这些代码:
14、然后运行之后就可以正常运行

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

2 个回复

倒序浏览
jinbiao0118
注册会员   /  发表于:2022-3-8 16:52:06
沙发
不错,写得非常好
回复 使用道具 举报
Bella.YuanWyn认证
超级版主   /  发表于:2022-3-9 08:51:14
板凳
jinbiao0118 发表于 2022-3-8 16:52
不错,写得非常好

感谢老铁肯定
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部