翻譯|使用教程|編輯:王香|2019-02-18 10:34:54.000|閱讀 604 次
概述:ActiveReports Web端在線報表設計器已經正式上線!看到它這么帥氣、實用,你是不是也想自己動手創建一個? 現在我們就來教您,如何創建一個簡單的 ActiveReports Web端在線報表設計器。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
ActiveReports Web端在線報表設計器已經正式上線!看到它這么帥氣、實用,你是不是也想自己動手創建一個? 現在我們就來教您,如何創建一個簡單的 ActiveReports Web端在線報表設計器(文末有示例源碼,請大家下載體驗)。
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’ 文件,然后再在里面添加如下文件

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正版授權,請點擊“”喲!
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn