APP下载

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

消息来源:baojiabao.com 作者: 发布时间:2026-07-19

报价宝综合消息创建您的 ActiveReports Web端在线报表设计器

  概述

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

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

  了解更多ActiveReports,可前往官网(https://www.grapecity.com.cn/developer/activereports)查看。

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

  创建步骤

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

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

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

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

  在查询框中输入“OWIN”,点击安装

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

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

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

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

  添加引用

  添加如下引用,引用的具体路径:

  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

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

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

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

  源码路径:

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

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

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

   handlers>

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

  baseServerApi.js

  web-designer.css

  web-designer.js

  vendor

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

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

  最后运行结果:

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

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

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

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

  添加 css 文件

  

  添加 JS 文件

  

  复制下面的

  替换 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>

  替换 index.html中的 

特别提醒:本网内容转载自其他媒体,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。

2020-02-10 10:54:00

相关文章