文档章节

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

x
 xiaochuachua
发布于 02/18 10:39
字数 1216
阅读 0
收藏 0

下载ActiveReport最新试用版

概述

ActiveReports Web端在线报表设计器已经正式上线!看到它这么帅气、实用,你是不是也想自己动手创建一个? 现在我们就来教您,如何创建一个简单的 ActiveReports Web端在线报表设计器(文末有示例源码,请大家下载体验)。

创建步骤

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

ActiveReport

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

ActiveReport

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

ActiveReport

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

ActiveReport

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

ActiveReport

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

ActiveReport

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

ActiveReport

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

ActiveReport

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

ActiveReport

10、添加引用

ActiveReport

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

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

ActiveReport

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

ActiveReport

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

using System;
using System.IO;
using System.Linq;
using System.Web;
using GrapeCity.ActiveReports.Aspnet.Designer;
using Owin;
using Microsoft.Owin;
using Microsoft.Owin.StaticFiles;
using Microsoft.Owin.FileSystems;
using System.Web.Mvc;
using System.Web.Routing;
[assembly: OwinStartup(typeof(AspNetDesignerSample.Startup))]
namespace AspNetDesignerSample
{
   public class Startup
   {
       // resources (reports, themes, images) location
       private static readonly DirectoryInfo ResourcesRootDirectory =
           new DirectoryInfo(String.Format("{0}.\\resources\\", HttpRuntime.AppDomainAppPath));
       public void Configuration(IAppBuilder app)
       {
           // web designer middleware
           app.UseDesigner(config => config.UseFileStore(ResourcesRootDirectory));
           // static files middlewares
           var fileSystem = new PhysicalFileSystem(String.Format("{0}.\\wwwroot\\", HttpRuntime.AppDomainAppPath));
           app.UseDefaultFiles(new DefaultFilesOptions { DefaultFileNames = new[] { "index.html" }, FileSystem = fileSystem });
           app.UseStaticFiles(new StaticFileOptions { FileSystem = fileSystem });
       }
   }
}

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

源码路径:

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

ActiveReport

15、在该路径下C:\Program Files (x86)\GrapeCity\ActiveReports 13\Deployment\WebDesigner folder on 64-bit Windows. 复制 Web.Config 去替换项目中的已存在的 Web.Config 文件,注意需要移除Web.Config 中的如下配置。

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

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

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

ActiveReport

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

ActiveReport

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

<!DOCTYPE html>
<html>
<head>
   <title>Web Designer Sample</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <!-- designer-related css -->
   <link rel="stylesheet" href="vendor/css/materialdesignicons.min.css" media="all" type="text/css" />
   <link rel="stylesheet" href="vendor/css/bootstrap.min.css" />
   <link rel="stylesheet" href="vendor/css/font-awesome.min.css">
   <link rel="stylesheet" href="vendor/css/ionicons.min.css">
   <link rel="stylesheet" href="vendor/css/fonts-googleapis.css" type="text/css">
   <link rel="stylesheet" href="web-designer.css" />
</head>
<body class="theme-blue">
   <!-- designer-related js -->
   <script src="vendor/js/jquery.min.js"></script>
   <script src="vendor/js/bootstrap.min.js"></script>
   <script src="baseServerApi.js"></script>
   <script src="web-designer.js"></script>
   <!-- designer root div -->
   <div id="designer-id" style="width: 100%; height: 100%;"></div>
   <script>
       // create designer options
       var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);
       // render designer application
       GrapeCity.ActiveReports.WebDesigner.renderApplication('designer-id', designerOptions);
   </script>
</body>
</html>

19、最后运行结果:

ActiveReport

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

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

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

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

ActiveReport

21、添加css文件

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

22、添加JS文件

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

23、复制下面的<div>替换 index.html 中原来的<div>

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

24、替换index.html中的<Script>中的内容:

<script>
   var showElement = function (id) {
       if (!id) return;
       ($('#' + id)).css('display', 'block');
   };
   var hideElement = function (id) {
       if (!id) return;
       ($('#' + id)).css('display', 'none');
   };
   var designerId = 'designer-id';
   var saveAsDialogId = 'save-as-dialog-id';
   function onSaveAs(options) {
       showElement(saveAsDialogId);
       // render save-as dialog
       fileDialog.createSaveReportAsDialog(saveAsDialogId, {
           locale: options.locale,
           api: {
               getReportsList: function () {
                   return baseServerApi.getReportsList()
                       .then(function (reportsList) {
                           return reportsList.map(function (reportInfo) {
                               return { path: reportInfo.Name };
                           });
                       });
               },
               saveReport: function (saveOptions) {
                   return baseServerApi.saveNewReport({
                       name: saveOptions.path,
                       content: options.reportInfo.content,
                   }).then(function (saveResult) {
                       return { id: saveResult.Id };
                   });
               },
           },
           reportInfo: {
               path: options.reportInfo.name,
           },
           onSuccess: function (saveResult) {
               hideElement(saveAsDialogId);
               options.onSuccess({ id: saveResult.id, name: saveResult.path });
           },
           onClose: function () {
               hideElement(saveAsDialogId);
           },
       });
   };
   // create designer options
   var designerOptions = GrapeCity.ActiveReports.WebDesigner.createDesignerOptions(baseServerApi);

   designerOptions.reportInfo.id = " MyReport.rdlx";
   // enable showing save-as button
   designerOptions.saveAsButton.visible = true;
   // specify behavior on save-as
   designerOptions.onSaveAs = onSaveAs;
   // render designer application
   GrapeCity.ActiveReports.WebDesigner.renderApplication(designerId, designerOptions);
</script>

25、至此,一个简单的ActiveReport在线报表设计器已经创建成功,最终运行结果如下:

ActiveReport

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

>>点击下载“WebDesignerSample”

本文转载自:https://www.grapecity.com.cn/blogs/create-your-activereport-web-report-designer

x
粉丝 0
博文 225
码字总数 49214
作品 0
私信 提问
ActiveReports报表控件 V13 正式发布,提供在线报表设计和自适应报表布局

重磅消息, ActiveReports V13 正式发布!本次更新 ActiveReports 将给您带来全新的报表设计体验:提供在线报表设计器、提供响应式布局和屏幕尺寸自适应能力、提供全新的图表…… 在列举 Ac...

葡萄城技术团队
01/25
102
0
【更新】ActiveReports V13.1 发布,新增垂直合并单元格功能、加入全新图表

ActiveReports ActiveReports是一款在全球范围内应用非常广泛的报表控件,以提供.NET报表所需的全部报表设计功能领先于同类报表控件,包括对交互式报表的强大支持、丰富的数据可视化方式、与...

xiaochuachua
05/16
8
0
【葡萄城公开课】ActiveReports V13报表工具全新体验

葡萄城公开课 - 本期公开课介绍 ActiveReports 13 正式发布了,本次更新将为 ActiveReports 增加多项超强报表功能! - 在线报表设计器:满足您在Web应用程序中为最终用户提供临时报表设计的强...

葡萄城技术团队
01/16
52
0
绿色报表设计器 - ActiveReports

ActiveReports 是绿色报表设计器,可方便设计ActiveReports的页面报表、区域报表,同时提供打印、预览功能。 依赖.NET Framework 4.5环境,直接解压使用。 无论您研发的是桌面应用系统,Web...

葡萄城控件技术团队
2014/08/19
21.9K
10
activereports报表控件7.0免费下载使用教程功能介绍大全

ActiveReports For .NET 6.0是一款强大的.NET报表控件,可以同时用于Windows Forms 和Web Forms平台下,具有自定义、高性能、高质量、多语言支持功能,可以进行报表设计,打印,浏览,转换,...

kongjianxuanxing
2014/04/28
258
0

没有更多内容

加载失败,请刷新页面

加载更多

shangcheng-my

1.数据库主键、外键类型为bigint,那么在后台应该用什么类型的变量定义? 后台用string接收,因为前段传过来的一般都是json字符串,后台直接接收,mysql是可以吧数字类型的字符串转换为对应的...

榴莲黑芝麻糊
昨天
1
0
微服务架构依赖图

基于spring-cloud-alibaba + dubbo

龙影
昨天
3
0
Centos7 安装zabbix-agent

rpm -i https://repo.zabbix.com/zabbix/4.2/rhel/6/x86_64/zabbix-release-4.2-2.el6.noarch.rpm 可以到https://repo.zabbix.com/zabbix找到对应的版本 yum install zabbix-agent -y 出现E......

abowu
昨天
8
0
文本编辑器GNU nano 4.4 发布

GNU nano 4.4 "Hagelslag" 更新日志: 启动时,光标可以放在第一个或最后一个出现位置 字符串前面带有+/string 或 +?string的字符串。 发生自动硬包装时((--breaklonglines),任何前导引号...

linuxCool
昨天
7
0
你知道字节序吗

字节序 最近在调一个自定义报文的接口时,本来以为挺简单的,发现踩了好几个坑,其中一个比较“刻骨铭心”的问题就是数据的字节序问题。 背景 自定义报文,调用接口,服务端报文解析失败 iO...

杭城小刘
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部