创建您的 ActiveReports Web端在线报表设计器

 

概述

ActiveReports Web端在线报表设计器已经正式上线！看到它这么帅气、实用，你是不是也想自己动手创建一个？

现在我们就来教您，如何创建一个简单的 ActiveReports Web端在线报表设计器（文末有示例源码，请大家下载体验），如您想体验ActiveReports 在线报表设计器的全部功能；

 

了解更多ActiveReports，可前往官网（https://www.grapecity.com.cn/developer/activereports）查看。

请登录 ActiveReports 官网，点在线报表设计器菜单（https://www.grapecity.com.cn/developer/activereports/designer）。

 

创建步骤

1. 打开VS，然后创建一个 .Net Framework 4.6.2的ASP .NET Empty Web Application的空项目

   

2. 选中引用，然后右键>> 管理NuGet程序包 >>点击

   

3. 选择“浏览”，然后在查询框中输入” Nunit”, 点击安装

4. 

5. 在查询框中输入“Microsoft ASP.NET MVC”，点击安装，然后选择“我接受”

   

6. 在查询框中输入“OWIN”，点击安装

   

7. 在查询框中输入” Microsoft.Owin” ,点击安装，然后选择“我接受”

   

8. 在查询框中输入“ Microsoft.Owin.Host.SystemWeb”，点击安装，然后选择“我接受”

   

9. 在查询框中输入“ Microsoft.Owin.StaticFiles”，点击安装，然后选择“我接受”

   

10. 在查询框中输入“ Microsoft.Owin.FileSystems”，如果显示“已安装”，则跳过此步骤

    

11. 添加引用

    

12. 添加如下引用，引用的具体路径：

    C:\Program Files (x86)\Common Files\GrapeCity\ActiveReports 13

    添加引用如下：

    • GrapeCity.ActiveReports.Aspnet.Viewer

    • GrapeCity.ActiveReports.Aspnet.Designer

    • GrapeCity.ActiveReports.Core.Diagnostics

    • Grapecity.ActiveReports.Core.Rdl

    

13. 在项目中新添加一个新的文件

    

14. 在新的 Startup.cs 的代码替换如下代码：

15. 在项目中创造一个’resourse’ 的文件，然后在可以在这个文件里放报表文件、主题、图片。为了方便你可以直接把web在线报表设计器源码里的 ’resourse’整个文件直接赋值粘贴到你当前的项目中，然后把 ’resourse’ 里的所有文件都是全部选择包含在项目中

    源码路径：

    C:\Users\******\Documents\GrapeCitySamples\ActiveReports 13\Web\WebDesigner_MVC

    

16. 在该路径下C:\Program Files (x86)\GrapeCity\ActiveReports 13\Deployment\WebDesigner folder on 64-bit Windows.

    复制 Web.Config 去替换项目中的已存在的 Web.Config 文件，注意需要移除Web.Config 中的如下配置。

     <add name="AllUris" path="*" verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode" /> handlers> 

17. 在项目中新建一个 ’ wwwroot’ 文件，然后再在里面添加如下文件

    • baseServerApi.js
    • web-designer.css
    • web-designer.js
    • vendor

    

18. 在项目中新添加一个新的 HTMLpage

    

19. 在项目中打开 index页面，然后修改其内容，如下所示

20. 最后运行结果：

    

21. 如果你想打开的编辑界面，不是一个空白的页面，而是一个已经存在的报表。

    首先你需要在index.html的 createDesignerOptions() 的函数后面添加

    designerOptions.reportInfo.id = "MyReport.rdlx";

    "MyReport.rdlx"报表是在项目’resources’中存在的报表文件，不然就会找不到报表路径，显示不出来。

    

22. 添加 css 文件

    <link rel="stylesheet" href="file-dialog.css" /> <link rel="stylesheet" href="web-designer.css" /> 

23. 添加 JS 文件

    <link rel="stylesheet" href="file-dialog.css" /> <link rel="stylesheet" href="web-designer.css" /> 

24. 复制下面的

    替换 index.html 中原来的

     < div id="designer-id" style="width: 100%; height: 100%;">div>   < div id="save-as-dialog-id" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 9999;">div> 

25. 替换 index.html中的<Script>中的内容：
    

26. 至此，一个简单的 ActiveReport 在线报表设计器已经创建成功，最终运行结果如下：

    

 

ActiveReport 在线报表设计器示例源码

>>点击下载“WebDesignerSample”

（http://www.grapecity.com.cn/downloads/demo/WebDesignerSample.zip）

>>文中代码较长，可点此查看

（https://www.grapecity.com.cn/blogs/create-your-activereport-web-report-designer）

 

 

关于葡萄城（https://www.grapecity.com.cn/）

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

 

免责声明：科技狗对文中陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。请读者仅作参考，并请自行承担全部责任。 本网站转载图片、文字之类版权申明，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除：yzl_300@126.com

延伸阅读：

甘肃移动与启明星辰签署战略协议 聚能云网新

2023 ICAEW“特许新星”国际商业案例大赛中国

从“老有所事”到“老有所乐” 千尺学堂钢琴

AMD EPYC处理器随斩获新的超级计算及高性能云

生命说梁志：健康重在管理，生命说三健战略助力全

清凉夏日好消息,启明星辰集团堡垒机销量排名

BOE（京东方）创新解决方案亮相2020服贸会 赋能智

有意义的设计|电视屏幕为什么越大越好？

难道家电旧品处理之路，只能负重前行么？

菏泽市华鸿集团无良开发商打造青禾源（青禾苑）烂尾楼

2020国际科创节开启 快狗打车荣获2020杰出科技抗

免费在线 Excel！随时随地可用，不再依赖Office

国企珠海九洲大手笔入股日海智能(002313) ，国资民

随芯嗨购，爆款不断 AMD双十一大促战幕拉开

3年营收翻8倍，网易智慧企业业务多品牌战略升级

成为锦鲤,您就仅仅满足于此?集呈科技,将带您成就