彩票走势图

解读ActiveReports v13新特性:JS Viewer渲染报表

转帖|其它|编辑:陈津勇|2019-09-04 16:49:49.430|阅读 401 次

概述:本文主要介绍.NET报表控件ActiveReports最新版中的 JSViewer功能——基于JavaScript,为用户提供响应式布局和屏幕尺寸自适应功能。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

  • 响应式网页设计

  • 适应不同的屏幕尺寸

  • 减少了对其它库的依赖(如jQuery等)

  • 适用于现代Web端的应用框架:Asp.net MVC,Asp.net Core MVC ,HTML5和主要的JavaScript框架,如Angular 和 Vue.js

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

点击下载ActiveReports试用版

JS Viewer渲染报表的步骤

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

0998451afe715ad320fbcf2908ba64fc.png

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

1.png

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

2.png

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

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

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

3.png

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

4521bf85a978ce80e0dfbcd4fd7afc21.png

6、添加引用

4.png

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

8d3a979a5d4ba4463ac41746a6f87ff8.png

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

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

注意:移除Web.Config中的


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

11406c07e9f9c045154da55deff376fc.png

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的添加如下代码:

        
                
    Loading Report

15、报表运行结果如下:

5d950ebc8a6a81b5a61c36296e242a01.png

JS Viewer示例的源码

>>点击获取JSViewer示例源码



想要获得 ActiveReports 更多资源的伙伴,请点这里。

想要获取 ActiveReports 正版授权的伙伴,


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP