如何在ReactJS中使用FastReport Core Web Report

下載FastReport.Net最新版本

    FastReport Core Web Report旨在與流行的.Net Core框架協同工做。因爲與趨勢網框架和Angular，React，Vue等庫的兼容性，他得到了更多的人氣。所以，許多FastReport用戶但願在上面庫中編寫的Web應用程序中使用報表。在另外一篇文章中，咱們已經考慮過如何在基於Angular的單頁面應用程序中顯示報表。如今讓咱們看一下使用FR的例子。在ReactJS上的應用程序的核心。

    要使用React庫，您須要安裝Node JS程序平臺，該平臺容許您在服務器端運行JavaScript代碼。此外，它將安裝Package Manager NPM，它容許您安裝開發所需的各類Java Script包。

    接下來，您須要.Net Core SDK 2.0。可是，若是您正在使用MS Visual Studio 2017進行開發，那麼您已經安裝了此SDK。

    要在React上建立項目，只需在Windows命令提示符下運行一個命令。但首先須要打開要在其中建立項目的文件夾（命令CD）。建立一個項目。

    dotnet new react -o FRCoreWebReportReact

    正如您猜想的那樣，FRCoreWebReportReact是將來項目的名稱。如今打開    FRCoreWebReportReact。csproj文件。

    在NuGet Manager中添加FastReport包：

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

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

    接下來要作的是將App_Data文件夾添加到項目中。從FastReport.Net的交付中，咱們能夠爲它們提供多個報表模板和XML數據庫。

    讓咱們再添加一個文件夾到項目的根目錄 - Views。它將存儲咱們稍後將討論的視圖。

    如今讓咱們開始開發應用程序的後端。Controllers文件夾中已有一個 - SampleDataController。讓咱們建立本身的，名爲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();
 }
 }
}

    控制器中只有一種方法 - 將報告模板加載到Web報表對象中並在視圖中顯示它。DisplayReport方法接受name參數 - 報表的標題。

    如今，對於此Web方法，您須要建立一個視圖。右鍵單擊方法名稱並選擇AddView：

    另外一個文件夾 - 報表 - 將自動添加到文件夾視圖中，而且將顯示DisplayReport視圖。使用如下代碼行替換視圖的內容：

@await ViewBag.WebReport.Render()

    在應用程序的服務器端惟一要作的就是編輯Startup.cs文件。在Configure方法中，添加如下行：

app.UseFastReport();

    轉到ReactJS上的應用程序的客戶端。

    在解決方案資源管理器中，找到ClientApp目錄並展開它。而後咱們打開src和組件。

讓咱們在這個文件夾中建立一個新的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}
  );
 }
}

    此組件表示將顯示報表的頁面。在類構造函數中，咱們聲明瞭一個包含報表名稱的選項數組。而後實現onChange-handleChange事件處理程序。在其中，咱們指定options數組的元素和變量名的值，它們將傳遞給服務器以生成所選報表。

    應該一塊兒考慮createMarkup和getReport的靜態方法。第一個建立一個IFRAME，其數據源是咱們以前實現的DisplayReport視圖。第二種是將HTML代碼從createMarkup轉換爲安全的代碼，容許您將其嵌入DOM中。

    Render（）函數包含將在頁面上顯示的標記代碼。這裏咱們建立一個變量內容，當您在下拉列表中選擇報表名稱時，它將把結果做爲值getReport函數。不然，不會顯示任何內容。

    注意

   FRCoreWebReportReact      …
   Report
  …
   

    如今讓咱們將Report組件添加到App.js：

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

    運行應用程序：

    首先頁面爲空，只有下拉列表可用。從中選擇一個報表：

    如今選擇另外一份報表：

    總而言之，假設咱們的目標已實現 - FastReport報表顯示在React庫中編寫的應用程序中。此外，Web報表控制面板中的全部按鈕都保存了功能，例如導出。選擇導出到Microsoft Excel 2007：

    咱們獲得的文件：

---

相關連接：

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