玖玖中文字幕,超碰人人超,狼友视频第二页

報(bào)表設(shè)計(jì)器ActiveReports使用教程詳解（附源碼）

轉(zhuǎn)帖|使用教程|編輯：鮑佳佳|2021-02-03 10:09:15.030|閱讀 685 次

概述：ActiveReports Web端在線報(bào)表設(shè)計(jì)器已經(jīng)正式上線！本文主要詳細(xì)講解如何創(chuàng)建一個(gè)簡(jiǎn)單的 ActiveReports Web端在線報(bào)表設(shè)計(jì)器。

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

ActiveReports 是一款專注于 .NET 和 .NET Core 平臺(tái)的報(bào)表控件。通過(guò)拖拽式報(bào)表設(shè)計(jì)器，可以快速地設(shè)計(jì) Excel表格、Word文檔、圖表、數(shù)據(jù)過(guò)濾、數(shù)據(jù)鉆取、精準(zhǔn)套打等類型報(bào)表，全面滿足 WinForm、ASP.NET、ASP.NET MVC、WPF 平臺(tái)中各種報(bào)表的開(kāi)發(fā)需要。同時(shí)，通過(guò)豐富的 API 可以靈活的實(shí)現(xiàn)報(bào)表創(chuàng)建、加載和運(yùn)行時(shí)的個(gè)性化自定義需求。

下載ActiveReports最新版本

ActiveReports Web端在線報(bào)表設(shè)計(jì)器已經(jīng)正式上線！

現(xiàn)在我們就來(lái)教您，如何創(chuàng)建一個(gè)簡(jiǎn)單的 ActiveReports Web端在線報(bào)表設(shè)計(jì)器（文末有示例源碼，請(qǐng)大家下載體驗(yàn)），如您想體驗(yàn)ActiveReports 在線報(bào)表設(shè)計(jì)器的全部功能，請(qǐng)登陸 ActiveReports 官網(wǎng)，點(diǎn)擊在線報(bào)表設(shè)計(jì)器菜單。

創(chuàng)建步驟

打開(kāi)VS，然后創(chuàng)建一個(gè) .Net Framework 4.6.2的ASP .NET Empty Web Application的空項(xiàng)目
選中引用，然后右鍵>> 管理NuGet程序包 >>點(diǎn)擊
選擇“瀏覽”，然后在查詢框中輸入” Nunit”, 點(diǎn)擊安裝
在查詢框中輸入“Microsoft ASP.NET MVC”，點(diǎn)擊安裝，然后選擇“我接受”
在查詢框中輸入“OWIN”，點(diǎn)擊安裝
在查詢框中輸入” Microsoft.Owin” ,點(diǎn)擊安裝，然后選擇“我接受”
在查詢框中輸入“ Microsoft.Owin.Host.SystemWeb”，點(diǎn)擊安裝，然后選擇“我接受”
在查詢框中輸入“ Microsoft.Owin.StaticFiles”，點(diǎn)擊安裝，然后選擇“我接受”
在查詢框中輸入“ Microsoft.Owin.FileSystems”，如果顯示“已安裝”，則跳過(guò)此步驟。
添加引用
添加如下引用，引用的具體路徑：

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
在項(xiàng)目中新添加一個(gè)新的文件

在新的 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 });         }     }  }

在項(xiàng)目中創(chuàng)造一個(gè)’resourse’ 的文件，然后在可以在這個(gè)文件里放報(bào)表文件、主題、圖片。為了方便你可以直接把web在線報(bào)表設(shè)計(jì)器源碼里的 ’resourse’整個(gè)文件直接賦值粘貼到你當(dāng)前的項(xiàng)目中，然后把 ’resourse’ 里的所有文件都是全部選擇包含在項(xiàng)目中

源碼路徑：

C:\Users\******\Documents\GrapeCitySamples\ActiveReports 13\Web\WebDesigner_MVC
在該路徑下C:\Program Files (x86)\GrapeCity\ActiveReports 13\Deployment\WebDesigner folder on 64-bit Windows.

復(fù)制 Web.Config 去替換項(xiàng)目中的已存在的 Web.Config 文件，注意需要移除Web.Config 中的如下配置。
```
<handlers>   <add name="AllUris" path="*" verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode" />  </handlers>  
```
在項(xiàng)目中新建一個(gè) ’ wwwroot’ 文件，然后再在里面添加如下文件
- baseServerApi.js
- web-designer.css
- web-designer.js
- vendor
在項(xiàng)目中新添加一個(gè)新的 HTMLpage

在項(xiàng)目中打開(kāi) index頁(yè)面，然后修改其內(nèi)容，如下所示

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

最后運(yùn)行結(jié)果：
如果你想打開(kāi)的編輯界面，不是一個(gè)空白的頁(yè)面，而是一個(gè)已經(jīng)存在的報(bào)表。

首先你需要在index.html的 createDesignerOptions() 的函數(shù)后面添加
```
designerOptions.reportInfo.id = "MyReport.rdlx";  
```
"MyReport.rdlx"報(bào)表是在項(xiàng)目’resources’中存在的報(bào)表文件，不然就會(huì)找不到報(bào)表路徑，顯示不出來(lái)。

添加 css 文件

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

添加 JS 文件

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

復(fù)制下面的<div>替換 index.html 中原來(lái)的<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>

替換 index.html中的<Script> 中的內(nèi)容：

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