如何使用具有FastReport.Core庫(kù)的Online Designer

下載FastReport.Net最新版本

FastReport.Net在線訂購(gòu)火熱進(jìn)行中，立可享受特別優(yōu)惠！點(diǎn)此鏈接，速來(lái)?yè)屬?gòu)?。。?/span>

許多FastReport.Core用戶都對(duì)報(bào)表生成器如何在使用React庫(kù)編寫的Web應(yīng)用程序中工作感興趣。在本文中，我們將介紹使用在線設(shè)計(jì)器的方法。盡管它與常規(guī)報(bào)表顯示在同一個(gè)Web對(duì)象中，但與React中顯示的差異很大。

如果您從未在React上使用.Net Core上的后端創(chuàng)建應(yīng)用程序，那么您需要：

1）安裝NodeJS。這是一個(gè)軟件包，允許您在服務(wù)器端執(zhí)行JavaScript代碼，以及安裝各種JavaScript庫(kù)。

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

要?jiǎng)?chuàng)建應(yīng)用程序，請(qǐng)?jiān)陧?xiàng)目所在的文件夾中打開Windows命令提示符，然后執(zhí)行以下命令：

dotnet new react -o ReactFRCoreDesigner

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

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

安裝FastReport.Core包。

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

app.UseFastReport();

現(xiàn)在我們可以在項(xiàng)目中使用報(bào)表生成器。

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

如您所見，我們還從同一文件夾中添加了一個(gè)xml文件。這是一個(gè)報(bào)告數(shù)據(jù)庫(kù)。

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

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

第一種方法創(chuàng)建Web報(bào)表對(duì)象，為其設(shè)置模板和數(shù)據(jù)源，還設(shè)置報(bào)表編輯模式，報(bào)表設(shè)計(jì)器設(shè)置。因此，該方法將返回將顯示W(wǎng)eb報(bào)表對(duì)象的視圖。該方法有一個(gè)參數(shù) - 報(bào)表的名稱，我們?cè)趯?bào)表模板加載到報(bào)表的Web對(duì)象時(shí)替換該參數(shù)。

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

對(duì)于這兩種方法，您必須創(chuàng)建兩個(gè)視圖。在項(xiàng)目根目錄中創(chuàng)建一個(gè)Views文件夾。現(xiàn)在回到控制器。右鍵單擊設(shè)計(jì)方法簽名，然后從菜單中選擇“添加視圖”。設(shè)置視圖名稱 - 設(shè)計(jì)。用代碼替換創(chuàng)建的視圖的全部?jī)?nèi)容：

@await ViewBag.WebReport.Render()

對(duì)于SaveDesignedReport方法，我們還創(chuàng)建了一個(gè)具有相同名稱的視圖。 其內(nèi)容被替換為：

@ViewBag.Message

我們轉(zhuǎn)向前端。 React應(yīng)用程序位于ClientApp文件夾中。 在解決方案瀏覽器的樹中展開它。 進(jìn)一步我們打開src和components目錄。 將新組件添加到此文件夾。 創(chuàng)建一個(gè)名為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組件的導(dǎo)入。

首先，將狀態(tài)添加到類構(gòu)造函數(shù)中。 在我們的例子中，它是一個(gè)包含報(bào)表名稱的數(shù)組。 接下來(lái)，立即考慮render（） - 構(gòu)建網(wǎng)頁(yè)的方法。 每次狀態(tài)更改時(shí)都會(huì)執(zhí)行渲染。 例如，當(dāng)我們選擇列表項(xiàng)時(shí)，將執(zhí)行onChanges事件處理程序。 此方法使用setState函數(shù)設(shè)置name變量的新狀態(tài)。 之后，將重建渲染的內(nèi)容。

請(qǐng)注意

這里調(diào)用另一個(gè)組件。 作為參數(shù)，它接收選定的報(bào)表名稱。

考慮WebReport組件，它也應(yīng)該像在components目錄中創(chuàng)建的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 ();
 }
}

這個(gè)組件的重點(diǎn)是對(duì)后端執(zhí)行'get'請(qǐng)求并返回生成的html代碼。

每次props屬性更改時(shí)，都會(huì)執(zhí)行內(nèi)置函數(shù)componentWillReceiveProps（nextProps）。 也就是說(shuō)，當(dāng)此組件在調(diào)用時(shí)將收到新值。 我們從屬性中獲取報(bào)表名稱，并將其替換為請(qǐng)求的URL。 我們以文本格式得到答案。 它需要轉(zhuǎn)換為安全的html代碼才能插入到DOM中。 dangerouslySetInnerHTML屬性將幫助我們解決這個(gè)問(wèn)題。

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

…Designer

并在App.js文件中添加：

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

運(yùn)行該應(yīng)用程序，在Designer頁(yè)面上，我們將看到一個(gè)下拉列表：

選擇Matrix報(bào)表的名稱：

現(xiàn)在點(diǎn)擊Master-Detail：

轉(zhuǎn)到“報(bào)表”選項(xiàng)卡，然后單擊“保存”按鈕：

右側(cè)出現(xiàn)“已保存”消息，告訴我們?cè)诜?wù)器上成功保存報(bào)表。

另一個(gè)文件出現(xiàn)在App_Data文件夾中 - TestReport.frx。

這樣就完成了我們演示應(yīng)用程序的創(chuàng)建。我們成功顯示了報(bào)表設(shè)計(jì)器，將必要的報(bào)表加載到其中并保存。

相關(guān)鏈接：

• fastrepot.net最新試用版下載
• fastreport中文網(wǎng)
• FastReport最新中文用戶手冊(cè)火熱上線，速來(lái)下載！??！

關(guān)于產(chǎn)品的任何問(wèn)題，歡迎咨詢在線客服>>