隨著現(xiàn)代技術(shù)的高速發(fā)展，相關(guān)產(chǎn)業(yè)所衍生出來(lái)的數(shù)據(jù)集是越來(lái)越龐大。那么我們?nèi)绾文軌蚝?jiǎn)單、方便、快捷的展現(xiàn)自己輸入數(shù)據(jù)？并且能夠以我們想要的方式展現(xiàn)出來(lái)？報(bào)表——這一產(chǎn)物便應(yīng)運(yùn)而生，現(xiàn)在市面上流行的報(bào)表工具類(lèi)產(chǎn)品也是層出不窮。

    FastReport Core Web Report旨在與流行的.Net Core框架協(xié)同工作。由于與趨勢(shì)網(wǎng)框架和Angular，React，Vue等庫(kù)的兼容性，他獲得了更多的人氣。因此，許多FastReport用戶希望在上面庫(kù)中編寫(xiě)的Web應(yīng)用程序中使用報(bào)表。現(xiàn)在讓我們看一下使用FR的例子。在ReactJS上的應(yīng)用程序的核心。

    要使用React庫(kù)，您需要安裝Node JS程序平臺(tái)，該平臺(tái)允許您在服務(wù)器端運(yùn)行JavaScript代碼。此外，它將安裝Package Manager NPM，它允許您安裝開(kāi)發(fā)所需的各種Java Script包。

    接下來(lái)，您需要.Net Core SDK 2.0。但是，如果您正在使用MS Visual Studio 2017進(jìn)行開(kāi)發(fā)，那么您已經(jīng)安裝了此SDK。

    要在React上創(chuàng)建項(xiàng)目，只需在Windows命令提示符下運(yùn)行一個(gè)命令。但首先需要打開(kāi)要在其中創(chuàng)建項(xiàng)目的文件夾（命令CD）。創(chuàng)建一個(gè)項(xiàng)目。

    dotnet new react -o FRCoreWebReportReact

    正如您猜測(cè)的那樣，F(xiàn)RCoreWebReportReact是未來(lái)項(xiàng)目的名稱?，F(xiàn)在打開(kāi)    FRCoreWebReportReact。csproj文件。

    在NuGet Manager中添加FastReport包：

    這些包位于已安裝FastReport.Net的文件夾中：

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

    接下來(lái)要做的是將App_Data文件夾添加到項(xiàng)目中。從FastReport.Net的交付中，我們可以為它們提供多個(gè)報(bào)表模板和XML數(shù)據(jù)庫(kù)。

    讓我們?cè)偬砑右粋€(gè)文件夾到項(xiàng)目的根目錄 - Views。它將存儲(chǔ)我們稍后將討論的視圖。

    現(xiàn)在讓我們開(kāi)始開(kāi)發(fā)應(yīng)用程序的后端。Controllers文件夾中已有一個(gè) - SampleDataController。讓我們創(chuàng)建自己的，名為ReportController：

using System;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
 
namespace FRCoreWebReportReact.Controllers
{
 [Route("api/[controller]")]
 public class ReportController : Controller
 {
 [HttpGet("[action]")]
 public IActionResult DisplayReport(string name)
 {
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 //Load report into the object WebReport
 WebReport.Report.Load(String.Format("App_Data/{0}.frx", name));
 //Create Data source
 System.Data.DataSet dataSet = new System.Data.DataSet();
 //Open Data base xml
 dataSet.ReadXml(@"App_Data/nwind.xml"); 
 //Register data source in the object
 WebReport.Report.RegisterData(dataSet, "NorthWind");
 //Send report to View
 ViewBag.WebReport = WebReport;
 return View();
 }
 }
}

    控制器中只有一種方法 - 將報(bào)告模板加載到Web報(bào)表對(duì)象中并在視圖中顯示它。DisplayReport方法接受name參數(shù) - 報(bào)表的標(biāo)題。

    現(xiàn)在，對(duì)于此Web方法，您需要?jiǎng)?chuàng)建一個(gè)視圖。右鍵單擊方法名稱并選擇AddView：

    另一個(gè)文件夾 - 報(bào)表 - 將自動(dòng)添加到文件夾視圖中，并且將顯示DisplayReport視圖。使用以下代碼行替換視圖的內(nèi)容：

@await ViewBag.WebReport.Render()

  ;  在應(yīng)用程序的服務(wù)器端唯一要做的就是編輯Startup.cs文件。在Configure方法中，添加以下行：

app.UseFastReport();

    轉(zhuǎn)到ReactJS上的應(yīng)用程序的客戶端。

    在解決方案資源管理器中，找到ClientApp目錄并展開(kāi)它。然后我們打開(kāi)src和組件。

讓我們?cè)谶@個(gè)文件夾中創(chuàng)建一個(gè)新的Report.js文件：

import React, { PureComponent, Fragment } from 'react';
 
export class Report extends PureComponent {
 constructor(props) {
 super(props);
 this.state = {
 options: [
 {
 value: '-- Select report name --',
 },
 {
 value: 'Matrix',
 },
 {
 value: 'Master-Detail',
 
 },
 {
 value: 'QR-Codes',
 }, 
 {
 value: 'Highlight',
 }, 
 {
 value: 'Image',
 }
 ]
 };
 }
 
 handleChange = (event) => {
 this.setState({ value: event.target.value });
 this.name = event.target.value;
 }
 
 static createMarkup(name) {
 return { __html: '' };
 }
 
 static getReport(name) {
 return (
  )
 }
 
 render() {
 const { options, value } = this.state;
 let contents = this.name ? Report.getReport(this.name) : ;
 
 return (
     {options.map(item => (
  {item.value}
  ))}
    {contents}
  );
 }
}

    此組件表示將顯示報(bào)表的頁(yè)面。在類(lèi)構(gòu)造函數(shù)中，我們聲明了一個(gè)包含報(bào)表名稱的選項(xiàng)數(shù)組。然后實(shí)現(xiàn)onChange-handleChange事件處理程序。在其中，我們指定options數(shù)組的元素和變量名的值，它們將傳遞給服務(wù)器以生成所選報(bào)表。

    應(yīng)該一起考慮createMarkup和getReport的靜態(tài)方法。第一個(gè)創(chuàng)建一個(gè)IFRAME，其數(shù)據(jù)源是我們之前實(shí)現(xiàn)的DisplayReport視圖。第二種是將HTML代碼從createMarkup轉(zhuǎn)換為安全的代碼，允許您將其嵌入DOM中。

    Render（）函數(shù)包含將在頁(yè)面上顯示的標(biāo)記代碼。這里我們創(chuàng)建一個(gè)變量?jī)?nèi)容，當(dāng)您在下拉列表中選擇報(bào)表名稱時(shí)，它將把結(jié)果作為值getReport函數(shù)。否則，不會(huì)顯示任何內(nèi)容。

    注意

   FRCoreWebReportReact      …
   Report
  …

    現(xiàn)在讓我們將Report組件添加到App.js：

import { Report } from './components/Report';
export default class App extends Component {
displayName = App.name
 
render() {
return (……);
}
}

    運(yùn)行應(yīng)用程序：

    首先頁(yè)面為空，只有下拉列表可用。從中選擇一個(gè)報(bào)表：

    現(xiàn)在選擇另一份報(bào)表：

    總而言之，假設(shè)我們的目標(biāo)已實(shí)現(xiàn) - FastReport報(bào)表顯示在React庫(kù)中編寫(xiě)的應(yīng)用程序中。此外，Web報(bào)表控制面板中的所有按鈕都保存了功能，例如導(dǎo)出。選擇導(dǎo)出到Microsoft Excel 2007：

    我們得到的文件：

如果您對(duì) FastReport 報(bào)表工具感興趣，歡迎加入 FastReport QQ 交流群：702295239