概述

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

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

创建步骤

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

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

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

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

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

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

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

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

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

  10. 添加引用

  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

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

  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

  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

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

  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. 最后运行结果：

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

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

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

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

  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 在线报表设计器示例源码

>>点击下载“WebDesignerSample”

ActiveReports 报表控件| 下载试用

ActiveReports 是一款专注于 .NET 平台的报表控件，全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求，作为专业的报表工具为全球超过 300,000 开发人员提供了全面的报表开发服务。

创建您的 ActiveReports Web端在线报表设计器的更多相关文章

  1. Web在线报表设计器使用指南

    市面上的报表工具有很多,虽说功能大同小异,但每一个报表工具都有各自明确的定位,选择最合适的工具,才能达到事半功倍的效果. 本文将要介绍的ActiveReports报表工具,可全面满足 .NET 报表开 ...

  2. C# 报表设计器 （winform 设计端）开发与实现生成网页的HTML报表

    记得2010年之前,公司的项目基本上都要用到报表,以前我们常用的方法就是针对客户的需求来定制化开发(基本上是死写代码)来实现,经常导致项目经常性的延期,因为客户的需求经常会变化,随着用户的使用认知度的 ...

  3. 如何在CRM系统中集成ActiveReports最终报表设计器

    有时候,将ActiveReports设计器集成到业务系统中,为用户提供一些自定义的数据表,用户不需要了解如何底层的逻辑关系和后台代码,只需要选择几张关联的数据表,我们会根据用户的选择生成可供用户直接使 ...

  4. 在网页中编辑报表的报表设计器Stimulsoft Reports Designer.Web报表控件

    Stimulsoft Reports Designer.Web报表控件是一款网页报表设计器.您想在网页中编辑您的报表吗?现在是可能的! Stimulsoft Reports Designer.Web ...

  5. java 工作流项目源码 SSM 框架 Activiti-master springmvc 集成web在线流程设计器

    即时通讯:支持好友,群组,发图片.文件,消息声音提醒,离线消息,保留聊天记录 (即时聊天功能支持手机端,详情下面有截图) 工作流模块---------------------------------- ...

  6. BIRT使用1：简介、概念、元素、报表设计器组成

    前一篇博客对birt进行了一个初探,相信通过上篇博客大家对birt有个初步认识,接下来我们随着下面这张思维导图的展示,进入birt的使用学习. 这一篇博客是第一部分,主要介绍一下birt的简介.概念. ...

  7. 解析大型.NET ERP系统核心组件 查询设计器 报表设计器 窗体设计器 工作流设计器 任务计划设计器

    企业管理软件包含一些公共的组件,这些基础的组件在每个新项目立项阶段就必须考虑.核心的稳定不变功能,方便系统开发与维护,也为系统二次开发提供了诸多便利.比如通用权限管理系统,通用附件管理,通用查询等组件 ...

  8. Java开发报表——Grid++Report 报表设计器

    为了让数据显示的更加形象生动,报表在项目中差点儿是很常见的,可是大致能够分为两类: 一,图形:以图形的形式显示数据,比如柱状图,折线图,饼形图等等,这里有许多关于这方面的工具,比如JFreeChart ...

  9. 机房收费系统中的Grid++Report报表设计器的应用

    在进行账单查询功能的时候我应用了Grid++Report报表设计器,下面我就为大家介绍一下,还望大家多多指点. 首先,在Grid++Report报表设计器中进行报表界面的设置.在属性编辑窗口中这里对报 ...

随机推荐

  1. Linux（CentOs 7）系统重装笔记(一)

    参考文章: https://www.jb51.net/article/95263.htm https://blog.csdn.net/JackLiu16/article/details/7988182 ...

  2. C语言中负数的存储方式

    详细介绍负数的文章: https://blog.csdn.net/daiyutage/article/details/8575248 1.以char类型举例,其取值范围是 -128 ~ 127,即-2 ...

  3. python学习笔记5-字典

    # 字典(哈希映射.关联数组) d0 = {'a': 2, [0,1]:[1,2,3]} # TypeError: unhashable type: 'list' # 值可以是任意数据类型,但键不能是 ...

  4. Ajax post数据查询

    <?php $server = '127.0.0.1'; $user = 'root'; $password = ''; $database = 'yiibaidb'; $officecode ...

  5. JS中使用base64编码上传下载文件

    下载文件:使用FileSaver.js   https://github.com/eligrey/FileSaver.js/blob/master/README.md 手机端UC浏览器无法下载  安卓 ...

  6. MATLAB算术运算符和常用函数

    1 算术运算符 Matlab中的算术运算符按优先级由高到低为: (1) ^           幂 (2) *            乘      /            右除(正常除)       ...

  7. 多个页面引用公共的头部 header.html 和尾部 footer.html

    方法:通过load()函数,引入公共头部和尾部文件; js代码预览: $(".headerPage").load("header.html"); $(" ...

  8. 接口自动化框架(java)--2.接口用例POST请求，参数配置

    这套框架的报告是自己封装的 Post类型的接口通常有请求参数,请求参数也是json类型,所以需要写一个类将请求参数序列化成json对象 以常见的登录接口为例 新建一个package,和postPara ...

  9. FB面经 Prepare: Largest Island

    Find largest island in a board package fb; public class LargestIsland { public int findLargestIsland ...

  10. asp.net无限递归

    private void button1_Click(object sender, EventArgs e) { DialogResult dialogResult = folderBrowserDi ...