e-works数字化企业网  »  新闻  »  资讯  »  正文

ActiveReports V13 新特性(2)—JS Viewer渲染报表

2019年1月30日              
关键字:渲染报表  

概述

    ActiveReports V13现在提供基于JavaScript的一种全新的报表渲染方式——JS Viewer,与原来的Html5 Viewer相比,JS Viewer 具有以下优点:

  1. 响应式网页设计
  2. 适应不同的屏幕尺寸
  3. 减少了对其它库的依赖(如jQuery等)
  4. 适用于现代Web端的应用框架:Asp.net MVC,Asp.net Core MVC ,HTML5和主要的JavaScript框架,如Angular 和 Vue.js

    总结了这么多 JS Viewer 的优点,下面让我们一起来使用 JS Viewer进行报表的渲染吧(文末提供 JS Viewer示例的源码下载)。

JS Viewer 渲染报表的步骤

    1、 首先打开VS并且新建一个 Asp.net Web应用程序,同时 .Net Framework 版本选择 4.6.2

  

    2、 选择一个空的项目,然后点击确定

  

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

  

    4、 在程序包管理器的控制台里输入如下的命令:

install-package Microsoft.Owin.Host.SystemWeb –Pre 

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

  

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

  

    6、 添加引用

  

    7、 引用的具体路径:C:\Program Files (x86)\Common Files\GrapeCity\ActiveReports 13 ,选择 GrapeCity.ActiveReports.Aspnet.Viewer.dll 的引用添加到项目中

  

    8、 复制 Web.Config 文件,然后替换项目中已经存在的Web.Config 文件,Web.Config的路径:

C:\\Program Files (x86)\\GrapeCity\\ActiveReports 13\\Deployment\\JSViewer

注意点:移除 Web.Config 中的

<handlers> 
<add name="nostaticfile" path="*" verb="GET" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
</handlers> 

    9、 添加和配置报告中间件,例如:

  

    10、 中添加一个新的 HtmlPage1.html

    11、 在 Scripts 文件夹下添加 JS Viewer 对应的 JS 和 CSS 文件

    12、JS和CSS文件的路径如下:
    C:\Program Files (x86)\GrapeCity\ActiveReports13\Deployment\JSViewer

    13、 复制 jsViewer.min.js 和 jsViewer.min.css 文件到 ‘scripts’ 文件夹下

    14、 在新建的 HtmlPage1.html的 添加如下代码:

  

    15、 报表运行结果如下:

  

    JS Viewer示例的源码

    关于葡萄城

    赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。

责任编辑:陈玲
本文为授权转载文章,任何人未经原授权方同意,不得复制、转载、摘编等任何方式进行使用,e-works不承担由此而产生的任何法律责任! 如有异议请及时告之,以便进行及时处理。联系方式:editor@e-works.net.cn tel:027-87592219/20/21。
关键词阅读
相关资料
e-works
官方微信
掌上
信息化
编辑推荐
文章推荐
博客推荐
视频推荐