FastReport教程：如何在Angular單頁面應用程序中使用Online Designer
FastReport.Net在線訂購火熱進行中，立可享受特別優惠！點此鏈接，速來搶購?。?！
在本文中，我們將介紹在基于Angular框架和ASP .Net Core的單頁面應用程序中使用FastReport Online Designer的方法。由于此SPA應用程序的后端是在ASP .Net Core上實現的，因此我們可以輕松使用FastReport庫。仍然只有一個問題：如何在Angular客戶端應用程序中顯示Web報表對象。
您可能知道第一個版本中的Angular框架是在JavaScript中實現的。所有后續版本都是用TypeScript編寫的。現在，Angular的第一個版本被稱為AngularJS，而其他版本則有數字索引：2,3，... 7.我們將基于Angular 7創建一個演示應用程序。
在我們開始開發之前，讓我們為環境做好準備。您需要安裝Node js平臺。它將在服務器端啟用JavaScript。從制造商的網站//nodejs.org/en/下載該發行版并安裝。Node js包含NPM包管理器，它允許我們使用控制臺命令安裝用JavaScript編寫的必要庫。此外，您必須安裝.Net Core SDK 2.0及更高版本。
要快速創建演示應用程序，請使用Windows命令提示符。我們啟動cmd，然后傳遞到我們要創建項目的目錄。我們執行命令：
dotnet new angular -o AngularOnlineDesignerFRCore
接下來，我們需要一個在線設計器。首先需要在設計器中為.Net Core框架組裝一個新的在線設計器
在Visual Studio中打開我們的項目。使用在線設計器下載存檔后，將其解壓縮到項目中的wwwroot文件夾。
現在我們將使用NuGet包管理器將FastReport庫添加到項目中。在管理器的右上角有一個包源的下拉列表。我們需要一個本地來源。但是你需要配置它。要執行此操作，請單擊下一個齒輪形式的圖標。接下來，選擇本地源并為其設置本地磁盤上目錄的路徑：
C：\ Program Files（x86）\ FastReports \ FastReport.Net \ Nugets。完成設置后，安裝兩個可用的軟件包：FastReport.Core和FastReport.Web。
要在項目中使用FastReport，還需要在指定的方法中將以下行添加到Sturtup.cs文件中：
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
…
app.UseFastReport();
…
}要將報表上傳到設計器，我們需要將必要的報表模板添加到服務器。為此，請在項目根目錄中創建App_Data文件夾。從FastReport.Net delivery，Demos / Reports文件夾中添加幾個報告模板。另外，從此文件夾中復制nwind.xml數據文件：
現在我們可以開始編程。我們有一個控制器 - SampleDataController。由于我們使用示例頁面創建了一個演示應用程序，因此我們在控制器和客戶端中都有不必要的元素。讓我們從SampleDataController.cs控制器中刪除所有方法并添加我們自己的方法。
using System;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using System.IO;
namespace AngularOnlineDesignerFRCore.Controllers
{
[Route("api/[controller]")]
public class SampleDataController : Controller
{
[HttpGet("[action]")]
public IActionResult Design(string report)
{
WebReport WebReport = new WebReport();
WebReport.Width = "1000";
WebReport.Height = "1000";
WebReport.Report.Load("App_Data/"+report+".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 xml database
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); // We 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();
}
}
}第一個Design方法采用report參數，該參數是要加載的報表的名稱。我們創建報表對象，將報表模板加載到報表對象中并連接數據源。接下來，打開報表對象的設計模式，設置設計器在線頁面的路徑以及報表保存方法的路徑。
第二種方法是保存報表的回調。通過單擊設計器中的“保存”按鈕，我們將啟動一個將觸發此回調的保存事件。在此方法中，我們實現了將報表文件保存在服務器上作為TestReport。
對于這些方法，您需要創建視圖。但在我們的項目中沒有Views文件夾。讓我們在項目的根目錄創建它。在其中，您需要創建另一個文件夾 - SampleData。在這里我們添加視圖。首先是Design方法。該文件以相同的方式調用，其內容非常簡潔：
@await ViewBag.WebReport.Render();
我們只輸出Web報表對象。Render方法將其轉換為html。為SaveDesignedReport方法添加另一個視圖：
@ ViewBag.Message
此視圖顯示保存報表事件的狀態消息。
在這個階段，服務器端編程可以被認為是完整的。去前端。
與單頁應用程序相關的所有內容都位于ClientApp目錄中。將其部署到解決方案瀏覽器。在里面我們對src文件夾感興趣，然后是應用程序。
對于顯示主頁面組件，app.component.ts負責。我們要編輯它：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
}但首先，請考慮app.component.html文件中的頁面模板：
TextMaster-Detail
你注意到的第一件事是單選按鈕。使用它們，我們將選擇需要在在線設計器中打開的兩個報表一。單選按鈕訂閱了該事件（單擊）。此事件設置變量報表的值。我們將在最終確定應用程序組件時討論它。
接下來是按鈕，它也訂閱了click事件。Clicked（）函數由此事件調用。下一個div有一個條件 - 如果flag變量為true，則顯示嵌套的html代碼，我們從html變量中獲取。但要注意safeHtml函數，我們通過管道將其應用于html變量。此函數規范化html代碼，使其安全且適合嵌入DOM。
我們必須實現此功能。為此，請在當前文件夾中創建一個新的打樣文件 - app。我們稱之為safeHtml.pipe.ts：
import { PipeTransform, Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safeHtml' })
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) { }
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}DomSanitizer庫為我們完成所有工作，您只需要將html代碼提供給bypassSecurityTrustHtml方法。
讓我們回到應用程序組件。我們在其中實現了Clicked（）函數
import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [HttpService]
})
export class AppComponent {
html: string;
flag: boolean;
report: string;
constructor(private http: HttpClient){ }
Clicked() {
this.flag = false;
this.http.get('api/SampleData/Design?report='+report, { headers: { 'Accept': 'text/html' }, responseType: 'text' as 'text' }).).subscribe((data: string) => { this.html = data; this.flag = true });
}
}我們添加了一個接受HttpClient的類構造函數。我們需要它來完成獲取請求。Clicked（）函數設置flag變量的默認值。接下來，它對Design控制器方法執行get請求。變量報告中的報告名稱作為參數傳遞。如果get請求收到成功響應，則flag變量設置為true。這將顯示報表設計器將顯示的div。
但是，從組件向單獨的服務發出請求是一種好習慣。在當前app目錄中創建http.service.ts腳本：
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class HttpService {
constructor(private http: HttpClient) { }
getData(report) {
return this.http.get('api/SampleData/Design?report='+report, { headers: { 'Accept': 'text/html' }, responseType: 'text' as 'text' });
}
}現在讓我們轉換app.component.ts來使用它：
import { Component } from '@angular/core';
import { HttpService } from "./http.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [HttpService]
})
export class AppComponent {
html: string;
flag: boolean;
report: string;
constructor(private httpService: HttpService) {
}
Clicked() {
this.flag = false;
this.httpService.getData(this.report).subscribe((data: string) => { this.html = data; this.flag = true });
}
}為了在組件中加載和提供添加的模塊，需要將它們添加到app.module.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { SafeHtmlPipe } from './safeHtml.pipe';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
SafeHtmlPipe
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }現在，服務和管道都可以在AppComponent中使用。
這足以啟動應用程序并使用下載的報表顯示報表設計器。但有一個細微差別。由于WebReportDesigner應位于wwwroot目錄中，因此無法使用后端的視圖來處理保存報表的事件。
我們將通過代理后端的客戶來解救。因此，我們指出必須將請求發送到服務器端口，在我們的例子中是ng服務器。
要配置代理，您需要在src目錄中創建proxy.config.json文件：
{
"/": {
"target": "//localhost:4200/",
"secure": false,
"logLevel": "debug"
}
}在我們的例子中，ng服務器端口是4200，但它可以是不同的。您可以通過從控制臺運行服務器來學習它。為此，請運行Windows命令行，使用cd命令轉到ClientApp目錄，然后運行：npm start。從下一個顯示的文本中，您可以看到所需的端口號。
現在打開src目錄中的package.json文件并更改其中的以下設置：
{
"scripts": {
…
"start": "ng serve --proxy-config proxy.config.json",
"build": "ng build --prod --output-path ../AngularOnlineDesignerFRCore/wwwroot",
…
}因此，我們為代理指定了配置文件，并為ClientApp程序集設置了wwwroot文件夾。
現在您可以運行應用程序并評估已完成的工作。我們期待一個幾乎空的頁面，只有這些控件：
讓我們選擇兩個報表中的一個，然后單擊ShowOnlineDesigner按鈕：
設計器顯示加載的報表。單擊“報表”選項卡并單擊“保存”按鈕：
如果正確配置了代理，您將在右側的綠色框中看到消息保存。報告文件保存在服務器上。
在這一點上，我們將假設示范項目的工作已經完成。讓我們總結一下。后端開發幾乎與常規ASP.Net Core應用程序相同?？紤]到我們在一個命令中生成了幾乎所有文件，改進前端也不是那么困難。
相關鏈接：
關于產品的任何問題，歡迎咨詢
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線