【FastReport教程】如何在Web應(yīng)用程序中使用在線設(shè)計器

---

下載FastReport.Net最新版本

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

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

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

現(xiàn)在可以開始編程了。在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();
 }

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

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

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

現(xiàn)在報表下載方法到本地計算機(jī)：

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

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

[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();
 }

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

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

<h2>@ViewBag.Message</h2>

因此，第二個文件將出現(xiàn)在主文件夾 - SaveDesignedReport.cshtml中。 在Index（）方法中，指定了web報表屬性，webReport.DesignerSaveCallBack =“Home / SaveDesignedReport”。如果不知道將調(diào)用哪個視圖來顯示保存報表的回調(diào)，則可以設(shè)置此屬性的值。 現(xiàn)在編寫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()

在這里，我們顯示標(biāo)題。并使用BeginForm幫助程序創(chuàng)建一個帶有文件上載字段和按鈕的表單。作為參數(shù)，此幫助程序接受來自控制器的Web方法的名稱，控制器的名稱，請求的類型，數(shù)據(jù)的編碼方式。 在HomeController中創(chuàng)建了兩個方法：將報表下載到設(shè)計器并將報表下載到本地計算機(jī)。幫助程序創(chuàng)建的表單中的Web方法的名稱必須與控制器中的名稱匹配。 還創(chuàng)建了一個帶有按鈕的表單，用于將報表從服務(wù)器下載到本地計算機(jī)。在最后一行代碼中，我們將報表轉(zhuǎn)換為HTML格式并顯示它。為此，請使用內(nèi)置方法GetHtml（），這會導(dǎo)致將構(gòu)造的報表導(dǎo)出為此格式（在我們的示例中為設(shè)計器）。 在_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位于項目的根目錄，這意味著它配置整個應(yīng)用程序。我們將為其添加一個處理程序，以便將Web報表對象導(dǎo)出為Html格式：

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

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

由于

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

，出現(xiàn)了Browse ...按鈕和帶有文件名的標(biāo)簽。單擊此按鈕并選擇報表模板文件。

 

標(biāo)簽現(xiàn)在顯示文件名。單擊“Upload”按鈕：

該報表將上傳至設(shè)計人員。現(xiàn)在我們可以對報表模板進(jìn)行必要的更改。然后轉(zhuǎn)到“Report”選項卡并單擊“save”圖標(biāo)：

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