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

admin 发表于 2019-3-13 12:26:19

<h3 id="-">概述</h3>
ActiveReports
Web端在线报表设计器已经正式上线！看到它这么帅气、实用，你是不是也想自己动手创建一个？
现在我们就来教您，如何创建一个简单的 ActiveReports
Web端在线报表设计器（文末有示例源码，请大家下载体验），如您想体验ActiveReports
在线报表设计器的全部功能，请登陆 ActiveReports
官网，点击<a href="https://www.grapecity.com.cn/developer/activereports/designer">在线报表设计器</a>菜单。
<h3 id="-">创建步骤</h3>
<ol>
<li>打开VS，然后创建一个 .Net Framework 4.6.2的ASP .NET Empty Web
Application的空项目
<img src="https://www.grapecity.com.cn/media/1b82bff602ecbbfcf90a0687befa4580.png" style="max-width:800px;" alt="">
</li>
<li>选中引用，然后右键>> 管理NuGet程序包 >>点击
<img src="https://www.grapecity.com.cn/media/304fae25b048d3d2ac9d46c773fc32c3.png" style="max-width:800px;" alt="">
</li>
<li>选择“浏览”，然后在查询框中输入” Nunit”, 点击安装
<img src="https://www.grapecity.com.cn/media/02f38585f387b93c5d9a9135d27c9b3a.png" style="max-width:800px;" alt="">
</li>
<li>在查询框中输入“Microsoft ASP.NET MVC”，点击安装，然后选择“我接受”
<img src="https://www.grapecity.com.cn/media/1620d9c21caaa8152bc4a1b4b6d57beb.png" style="max-width:800px;" alt="">
</li>
<li>在查询框中输入“OWIN”，点击安装
<img src="https://www.grapecity.com.cn/media/3a744b4a2a9908d7519914462864d407.png" style="max-width:800px;" alt="">
</li>
<li>在查询框中输入” Microsoft.Owin” ,点击安装，然后选择“我接受”
<img src="https://www.grapecity.com.cn/media/d76b3b48c28adfca4ce16981bc89e81d.png" style="max-width:800px;" alt="">
</li>
<li>在查询框中输入“ Microsoft.Owin.Host.SystemWeb”，点击安装，然后选择“我接受”
<img src="https://www.grapecity.com.cn/media/e0fd27100cd972a6e20b5779846249e3.png" style="max-width:800px;" alt="">
</li>
<li>在查询框中输入“Microsoft.Owin.StaticFiles”，点击安装，然后选择“我接受”
<img src="https://www.grapecity.com.cn/media/6cb2a02f1d2b8f2db67950c0ec4c818c.png" style="max-width:800px;" alt="">
</li>
<li>在查询框中输入“ Microsoft.Owin.FileSystems”，如果显示“已安装”，则跳过此步骤。
<img src="https://www.grapecity.com.cn/media/10eaf879091eee93cfb66d0686a1f491.png" style="max-width:800px;" alt="">
</li>
<li>添加引用
<img src="https://www.grapecity.com.cn/media/d9185e8d46841c7f8a467cdb0c3d9418.png" style="max-width:800px;" alt="">
</li>
<li>添加如下引用，引用的具体路径：
C:\Program Files (x86)\Common Files\GrapeCity\ActiveReports 13
添加引用如下：
<ul>
<li>GrapeCity.ActiveReports.Aspnet.Viewer
</li>
<li>GrapeCity.ActiveReports.Aspnet.Designer
</li>
<li>GrapeCity.ActiveReports.Core.Diagnostics
</li>
<li>Grapecity.ActiveReports.Core.Rdl
</li>
</ul>
<img src="https://www.grapecity.com.cn/media/e5ec58e00e6eb9396231f3e9ccf18acf.png" style="max-width:800px;" alt="">
</li>
<li>在项目中新添加一个新的文件
<img src="https://www.grapecity.com.cn/media/1892acd5b9656e0bdce6d3a6531c4dff.png" style="max-width:800px;" alt="">
</li>
<li>在新的 Startup.cs 的代码替换如下代码：
<pre class="hljs cs"><code><code class="lang-c#">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;

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 });
 }
}
}
</code></code></pre>
</li>
<li>在项目中创造一个’resourse’
的文件，然后在可以在这个文件里放报表文件、主题、图片。为了方便你可以直接把web在线报表设计器源码里的
’resourse’整个文件直接赋值粘贴到你当前的项目中，然后把 ’resourse’
里的所有文件都是全部选择包含在项目中
源码路径：
C:\Users\******\Documents\GrapeCitySamples\ActiveReports
13\Web\WebDesigner_MVC
<img src="https://www.grapecity.com.cn/media/1d1164d539172ae3d19ec1d52f54155c.png" style="max-width:800px;" alt="">
</li>
<li>在该路径下C:\Program Files (x86)\GrapeCity\ActiveReports
13\Deployment\WebDesigner folder on 64-bit Windows.
复制 Web.Config 去替换项目中的已存在的 Web.Config 文件，注意需要移除Web.Config
中的如下配置。
<pre class="hljs javascript"><code><code class="lang-html"><handlers>
<add name="AllUris" path="*" verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode" />
</handlers>
</code></code></pre>
</li>
<li>在项目中新建一个 ’ wwwroot’ 文件，然后再在里面添加如下文件
<ul>
<li>baseServerApi.js</li>
<li>web-designer.css</li>
<li>web-designer.js</li>
<li>vendor</li>
</ul>
<img src="https://www.grapecity.com.cn/media/1208584a6215ee64f4b46ee72b527c15.png" style="max-width:800px;" alt="">
</li>
<li>在项目中新添加一个新的 HTMLpage
<img src="https://www.grapecity.com.cn/media/151ee4bf414d901bbef37209a046aec9.png" style="max-width:800px;" alt="">
</li>
<li>在项目中打开 index页面，然后修改其内容，如下所示
<pre class="hljs xml"><code><code class="lang-html"><!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">

<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">

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

<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>
</code></code></pre>
</li>
<li>最后运行结果：
<img src="https://www.grapecity.com.cn/media/183932e6b915710f0096fd7d7db7f242.png" style="max-width:800px;" alt="">
</li>
<li>如果你想打开的编辑界面，不是一个空白的页面，而是一个已经存在的报表。
首先你需要在index.html的 createDesignerOptions() 的函数后面添加
<pre class="hljs apache"><code><code class="lang-js">designerOptions.reportInfo.id = "MyReport.rdlx";
</code></code></pre>
"MyReport.rdlx"报表是在项目’resources’中存在的报表文件，不然就会找不到报表路径，显示不出来。
<img src="https://www.grapecity.com.cn/media/9069860133fea901acf554d0ee3408ce.png" style="max-width:800px;" alt="">
</li>
<li>添加 css 文件
<pre class="hljs xml"><code><code class="lang-html"><link rel="stylesheet" href="file-dialog.css" /> <link rel="stylesheet" href="web-designer.css" />
</code></code></pre>
</li>
<li>添加 JS 文件
<pre class="hljs xml"><code><code class="lang-html"><link rel="stylesheet" href="file-dialog.css" /> <link rel="stylesheet" href="web-designer.css" />
</code></code></pre>
</li>
<li>复制下面的<code class="hljs apache"><div></code>替换 index.html 中原来的<code class="hljs apache"><div></code>
<pre class="hljs xml"><code><code class="lang-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>
</code></code></pre>
</li>
<li>替换 index.html中的<code class="hljs xml"><Script></code>中的内容：
<pre class="hljs xml"><code><code class="lang-html"> <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>
</code></code></pre>
</li>
<li>至此，一个简单的 ActiveReport 在线报表设计器已经创建成功，最终运行结果如下：
<img src="https://www.grapecity.com.cn/media/6392ea348e543623ea55ce83e762a0ce.png" style="max-width:800px;" alt="">
</li>
</ol>
<h3 id="activereport-">ActiveReport 在线报表设计器示例源码</h3>
>><a href="http://www.grapecity.com.cn/downloads/demo/WebDesignerSample.zip">点击下载“WebDesignerSample”</a>

页: [1]

葡萄城开发者社区's Archiver

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