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:
我們得到的文件:
相關鏈接: