KearneyKang 发表于 2020-4-1 18:15:55

ActiveReportsV14如何在Asp.net项目中进行JSviewer渲染

本帖最后由 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的配置信息: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;
      }
}9、添加报表文件Reports再添加一张报表10、添加引用文件,我这是新建了一个scripts文件夹然后把要用到的CSS和JS文件放在文件中,其中jsViewer.min.css、jsViewer.min.css在该路径下
下载ActiveReports14之后,在JS资源文件中就有需要的引用11、添加一个新的index.html页面。然后进行页面的配置<!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/index.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="width: 100%; overflow-x: hidden">
      <div style="float:right;width:100% ;height:800px" id="viewerContainer">
      </div>
    </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>12、新添加一个新的Web窗体,然后Web页面中添加WebViewer 具体可以参考如下这个博客进行添加:https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=74397&extra=page%3D113、然后找到这个Global.asax文件,注释这些代码:14、然后运行之后就可以正常运行

jinbiao0118 发表于 2022-3-8 16:52:06

不错,写得非常好

Bella.Yuan 发表于 2022-3-9 08:51:14

jinbiao0118 发表于 2022-3-8 16:52
不错,写得非常好

感谢老铁肯定:itwn:
页: [1]
查看完整版本: ActiveReportsV14如何在Asp.net项目中进行JSviewer渲染