【FastReport教程】如何在Web應用程序中使用在線設計器

---

下載FastReport.Net最新版本

本文將介紹在MonoDevelop中創建Web應用程序并在其中使用在線設計器的方法。除了online designer這樣的按鈕，如下載報表給designer并將報表保存到本地計算機將位于頁面上 讓我們創建一個ASP .Net MVC項目：

我們需要在References中為項目添加庫： FastReport Mono，FastReport.Web，System.Net.Http。解壓縮歸檔文件并將WebReportDesigner文件夾添加到項目根目錄。

我們還需要一個文件夾，我們將在其中保存報表，存儲包含數據的文件。將App_Data文件夾添加到項目根目錄。我們將使用FastReport.Mono交付的演示報表，因此我們需要nwind.xml數據庫。將其添加到App_Data文件夾。

現在可以開始編程了。在Controller文件夾中是HomeController.cs文件，在使用部分，我們需要庫：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI;
using System.Text;
using System.IO;
using FastReport;
using FastReport.Web;
using FastReport.Utils;
using System.Web.UI.WebControls;
using FastReport.Export.Html;
using FastReport.Data;
using System.Net.Http.Headers;
using FastReport.Export.Image;
using System.Net.Http;

Web方法索引：

private WebReport webReport = new WebReport(); // Web report object
public ActionResult Index()
 {
 webReport.Width = Unit.Percentage(100);
 webReport.Height = Unit.Percentage(100);
 System.Data.DataSet dataSet = new System.Data.DataSet();
 dataSet.ReadXml("App_Data/nwind.xml"); // Read database
 webReport.Report.RegisterData(dataSet, "NorthWind"); // Register data in the report
if (System.IO.File.Exists("App_Data/report.frx"))
 {
 webReport.Report.Load("App_Data/report.frx");
 }
 webReport.DesignReport = true;
 webReport.DesignerPath = "WebReportDesigner/index.html";
 webReport.DesignerSaveCallBack = "Home/SaveDesignedReport";
 webReport.ID = "DesignReport";
 ViewBag.WebReport = webReport; // Pass the report to View
 return View();
 }

以前，我們創建了一個可在類中訪問的Web報表對象。在Index（）方法中，我們在開始時設置WebReport對象的大小 - 高度和寬度為100％。之后我們創建一個數據集。然后我們加載到xml數據庫中。我們在報表中注冊了數據源。我們檢查報表模板文件是否存在，如果成功，則將其加載到報表對象中。 接下來是Web報表對象的設置。打開報表編輯模式，可以顯示在線設計器。然后，指定設計器頁面的路徑。在下一步中，我們設置一個視圖以在保存報表時顯示回調。最后一個設置是報表對象的標識符。我們將來需要這個用于View。

使用ViewBag，我們將報表對象傳遞給視圖。 除了報表設計器之外，該頁面還包含用于將報表下載到設計器并將編輯后的報表保存到本地計算機的按鈕。 為這些按鈕編寫Web方法。首先將報表上傳到服務器：

[HttpPost] // The attribute indicates that the method processes the Post request.
 public ActionResult Upload(HttpPostedFileBase upload)
 { 
 if (upload != null)
 {
 // Save the file on the server
 upload.SaveAs("App_Data/report.frx");
 }
 return RedirectToAction("Index"); // Call web index method
 }

現在報表下載方法到本地計算機：

public FileResult GetFile()
 {
 return File("App_Data/tmp.frx", "application/octet-stream", "tmp.frx");
 }

tmp.frx報表文件的路徑在文件參數中指定。您注意到在上一個方法中我們將報表保存為report.frx。但report.frx是已加載報表模板的文件，我們的目標是編輯報表，并以不同的名稱保存。因此，我們需要另一種方法 - 保存已編輯報表的方法。我們將創建自己的事件處理程序，用于按下在線設計器中的報表保存按鈕：

[HttpPost]
 // call-back for save the designed report
 public ActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID);
 
 if (reportID == "DesignReport")
 {
 Stream reportForSave = Request.InputStream;
 string pathToSave = "App_Data/tmp.frx";
 
 using (FileStream file = new FileStream(pathToSave, FileMode.Create))
 {
 reportForSave.CopyTo(file);
 }
 }
 
 return View();
 }

在第一行中，我們會顯示一條消息，確認保存報表。然后，我們檢查報表標識符，如果它等于“DesignReport”，那么我們將結果發送到流。并基于此流創建新的報表模板文件。 對于此方法，我們需要創建一個視圖。右鍵單擊方法簽名并創建一個新視圖（創建視圖）：

在“View”代碼中，只需顯示消息：

<h2>@ViewBag.Message</h2>

因此，第二個文件將出現在主文件夾 - SaveDesignedReport.cshtml中。 在Index（）方法中，指定了web報表屬性，webReport.DesignerSaveCallBack =“Home / SaveDesignedReport”。如果不知道將調用哪個視圖來顯示保存報表的回調，則可以設置此屬性的值。 現在編寫Index.cshtml視圖：

@{
 ViewBag.Title = "Home Page";
}
<h3>Select file</h3>
@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
 <input type="file" name="upload" />
 <input type="submit" value="Upload" />
}
@using (Html.BeginForm("GetFile", "Home", FormMethod.Get))
 {
 <input id="dwn" type="submit" value="Download designed report" />
 }
@ViewBag.WebReport.GetHtml()

在這里，我們顯示標題。并使用BeginForm幫助程序創建一個帶有文件上載字段和按鈕的表單。作為參數，此幫助程序接受來自控制器的Web方法的名稱，控制器的名稱，請求的類型，數據的編碼方式。 在HomeController中創建了兩個方法：將報表下載到設計器并將報表下載到本地計算機。幫助程序創建的表單中的Web方法的名稱必須與控制器中的名稱匹配。 還創建了一個帶有按鈕的表單，用于將報表從服務器下載到本地計算機。在最后一行代碼中，我們將報表轉換為HTML格式并顯示它。為此，請使用內置方法GetHtml（），這會導致將構造的報表導出為此格式（在我們的示例中為設計器）。 在_Layout.cshtml頁面的主文件中，您需要連接FastReport腳本：

<head>
…
@WebReportGlobals.Scripts()
@WebReportGlobals.Styles() 
</head>

項目中有兩個Web配置。在ASP.Net項目中，web.config僅適用于它所在的目錄以及所有子目錄。因此，位于Views目錄中的Web.config專門用于視圖。打開它并在Namspaces部分添加幾行：

<system.webServer>
 <namespaces>
…
 <add namespace="FastReport" />
 <add namespace="FastReport.Web" />
 </namespaces>

第二個Web.config位于項目的根目錄，這意味著它配置整個應用程序。我們將為其添加一個處理程序，以便將Web報表對象導出為Html格式：

<system.webServer> 
 <handlers>
 …
 <add name="FastReportHandler" path="FastReport.Export.axd" verb="*" type="FastReport.Web.Handlers.WebExport"/>
 </handlers>
 </system.webServer>

如果web.config中沒有和部分，則添加它們。 在此步驟中，我們可以將其視為我們的小型Web應用程序。我們在xsp調試Web服務器上運行它。只需按Ctrl + F5鍵即可。

由于

<input type =“file”name =“upload”/>

，出現了Browse ...按鈕和帶有文件名的標簽。單擊此按鈕并選擇報表模板文件。

 

標簽現在顯示文件名。單擊“Upload”按鈕：

該報表將上傳至設計人員。現在我們可以對報表模板進行必要的更改。然后轉到“Report”選項卡并單擊“save”圖標：

報表已準備好下載，因此請單擊“下載設計報表”按鈕。將出現一個標準瀏覽器對話框，我們可以在其中下載報表或拒絕操作。下載報表并在下載文件夾中找到它。