如何使用具有FastReport.Core庫的Online Designer

下載FastReport.Net最新版本

FastReport.Net在線訂購火熱進行中，立可享受特別優惠！點此鏈接，速來搶購！！！

許多FastReport.Core用戶都對報表生成器如何在使用React庫編寫的Web應用程序中工作感興趣。在本文中，我們將介紹使用在線設計器的方法。盡管它與常規報表顯示在同一個Web對象中，但與React中顯示的差異很大。

如果您從未在React上使用.Net Core上的后端創建應用程序，那么您需要：

1）安裝NodeJS。這是一個軟件包，允許您在服務器端執行JavaScript代碼，以及安裝各種JavaScript庫。

2）安裝Microsoft Visual Studio 2017或其他IDE + .Net Core SDK 2.0。

要創建應用程序，請在項目所在的文件夾中打開Windows命令提示符，然后執行以下命令：

dotnet new react -o ReactFRCoreDesigner

打開創建的項目。讓我們將FastReport庫添加到NuGet包管理器中。配置文件夾的本地包源：

C：\ Program Files（x86）\ FastReports \ FastReport.Net \ Nugets

安裝FastReport.Core包。

在項目中找到Startup.cs文件，并在Configure（）方法中添加一行代碼：

app.UseFastReport();

現在我們可以在項目中使用報表生成器。

除了顯示在線設計器之外，我們還會查看傳輸所需報表名稱的方式，并將其上傳到在線設計器。因此，我們將App_Data文件夾添加到項目中。在其中，我們將從FR.Net安裝目錄中的Demos \ Reports文件夾添加報表模板。

如您所見，我們還從同一文件夾中添加了一個xml文件。這是一個報告數據庫。

找到Controllers文件夾。我們可以使用SampleDataController控制器。添加兩個方法：

…
using FastReport.Web;
using System.IO;
…
[HttpGet("[action]")]
 public IActionResult Design(string name)
 {
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 if (name != "Blank")
 WebReport.Report.Load("App_Data/" + name + ".frx"); // Load the report into the WebReport object
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml("App_Data/nwind.xml"); // Open the database xml
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // Set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = @"App_Data/TestReport.frx"; // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save query result to file
 }
 return View();
 }

第一種方法創建Web報表對象，為其設置模板和數據源，還設置報表編輯模式，報表設計器設置。因此，該方法將返回將顯示Web報表對象的視圖。該方法有一個參數 - 報表的名稱，我們在將報表模板加載到報表的Web對象時替換該參數。

第二種方法是用于單擊報表保存按鈕的回調處理程序。它將編輯的報表保存在App_Data文件夾中。

對于這兩種方法，您必須創建兩個視圖。在項目根目錄中創建一個Views文件夾。現在回到控制器。右鍵單擊設計方法簽名，然后從菜單中選擇“添加視圖”。設置視圖名稱 - 設計。用代碼替換創建的視圖的全部內容：

@await ViewBag.WebReport.Render()

對于SaveDesignedReport方法，我們還創建了一個具有相同名稱的視圖。 其內容被替換為：

@ViewBag.Message

我們轉向前端。 React應用程序位于ClientApp文件夾中。 在解決方案瀏覽器的樹中展開它。 進一步我們打開src和components目錄。 將新組件添加到此文件夾。 創建一個名為Designer的javascript文件：

import React, { PureComponent, Fragment } from 'react';
import { WebReport } from './WebReport';
 
export class Designer extends PureComponent {
 constructor(props) {
 super(props);
 this.state = {
 options: [
 {
 value: 'Select report name …',
 },
 {
 value: 'Matrix',
 },
 {
 value: 'Master-Detail',
 },
 {
 value: 'Text',
 },
 ]
 };
 } 
 
 handleChange = (event) => {
 this.setState({ name: event.target.value }); 
 };
 
 render() {
 const { options, value } = this.state;
 return ({options.map(item => ({item.value}))});
 }
 }

注意WebReport組件的導入。

首先，將狀態添加到類構造函數中。 在我們的例子中，它是一個包含報表名稱的數組。 接下來，立即考慮render（） - 構建網頁的方法。 每次狀態更改時都會執行渲染。 例如，當我們選擇列表項時，將執行onChanges事件處理程序。 此方法使用setState函數設置name變量的新狀態。 之后，將重建渲染的內容。

請注意

這里調用另一個組件。 作為參數，它接收選定的報表名稱。

考慮WebReport組件，它也應該像在components目錄中創建的Designer.js一樣：

import React, { Component } from 'react';
 
export class WebReport extends Component {
 constructor(props) {
 super(props);
 this.state = { designer: "" };
 }
 
 componentWillReceiveProps(nextProps) {
 fetch('api/SampleData/Design?name=' + nextProps.name + '').then(response => response.text()).then(text => {
 this.setState({ designer: text });
 });
 };
 
 render() {
 return ();
 }
}

這個組件的重點是對后端執行'get'請求并返回生成的html代碼。

每次props屬性更改時，都會執行內置函數componentWillReceiveProps（nextProps）。 也就是說，當此組件在調用時將收到新值。 我們從屬性中獲取報表名稱，并將其替換為請求的URL。 我們以文本格式得到答案。 它需要轉換為安全的html代碼才能插入到DOM中。 dangerouslySetInnerHTML屬性將幫助我們解決這個問題。

它仍然只是將Designer組件添加到菜單中。 添加到NavMenu文件：

…Designer

并在App.js文件中添加：

…
import { Designer } from './components/Designer';
………

運行該應用程序，在Designer頁面上，我們將看到一個下拉列表：

選擇Matrix報表的名稱：

現在點擊Master-Detail：

轉到“報表”選項卡，然后單擊“保存”按鈕：

右側出現“已保存”消息，告訴我們在服務器上成功保存報表。

另一個文件出現在App_Data文件夾中 - TestReport.frx。

這樣就完成了我們演示應用程序的創建。我們成功顯示了報表設計器，將必要的報表加載到其中并保存。

相關鏈接：

• fastrepot.net最新試用版下載
• FastReport最新中文用戶手冊火熱上線，速來下載！！！

關于產品的任何問題，歡迎咨詢