下載FastReport.Net最新版本

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

在本文中，我們將介紹在基于Angular框架和ASP .Net Core的單頁(yè)面應(yīng)用程序中使用FastReport Online Designer的方法。由于此SPA應(yīng)用程序的后端是在ASP .Net Core上實(shí)現(xiàn)的，因此我們可以輕松使用FastReport庫(kù)。仍然只有一個(gè)問(wèn)題：如何在Angular客戶(hù)端應(yīng)用程序中顯示W(wǎng)eb報(bào)表對(duì)象。

您可能知道第一個(gè)版本中的Angular框架是在JavaScript中實(shí)現(xiàn)的。所有后續(xù)版本都是用TypeScript編寫(xiě)的。現(xiàn)在，Angular的第一個(gè)版本被稱(chēng)為AngularJS，而其他版本則有數(shù)字索引：2,3，... 7.我們將基于Angular 7創(chuàng)建一個(gè)演示應(yīng)用程序。

在我們開(kāi)始開(kāi)發(fā)之前，讓我們?yōu)榄h(huán)境做好準(zhǔn)備。您需要安裝Node js平臺(tái)。它將在服務(wù)器端啟用JavaScript。從制造商的網(wǎng)站//nodejs.org/en/下載該發(fā)行版并安裝。Node js包含NPM包管理器，它允許我們使用控制臺(tái)命令安裝用JavaScript編寫(xiě)的必要庫(kù)。此外，您必須安裝.Net Core SDK 2.0及更高版本。

要快速創(chuàng)建演示應(yīng)用程序，請(qǐng)使用Windows命令提示符。我們啟動(dòng)cmd，然后傳遞到我們要?jiǎng)?chuàng)建項(xiàng)目的目錄。我們執(zhí)行命令：

dotnet new angular -o AngularOnlineDesignerFRCore

接下來(lái)，我們需要一個(gè)在線設(shè)計(jì)器。首先需要在設(shè)計(jì)器中為.Net Core框架組裝一個(gè)新的在線設(shè)計(jì)器

在Visual Studio中打開(kāi)我們的項(xiàng)目。使用在線設(shè)計(jì)器下載存檔后，將其解壓縮到項(xiàng)目中的wwwroot文件夾。

現(xiàn)在我們將使用NuGet包管理器將FastReport庫(kù)添加到項(xiàng)目中。在管理器的右上角有一個(gè)包源的下拉列表。我們需要一個(gè)本地來(lái)源。但是你需要配置它。要執(zhí)行此操作，請(qǐng)單擊下一個(gè)齒輪形式的圖標(biāo)。接下來(lái)，選擇本地源并為其設(shè)置本地磁盤(pán)上目錄的路徑：

C：\ Program Files（x86）\ FastReports \ FastReport.Net \ Nugets。完成設(shè)置后，安裝兩個(gè)可用的軟件包：FastReport.Core和FastReport.Web。

要在項(xiàng)目中使用FastReport，還需要在指定的方法中將以下行添加到Sturtup.cs文件中：

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
 {
…
 app.UseFastReport();
…
}

要將報(bào)表上傳到設(shè)計(jì)器，我們需要將必要的報(bào)表模板添加到服務(wù)器。為此，請(qǐng)?jiān)陧?xiàng)目根目錄中創(chuàng)建App_Data文件夾。從FastReport.Net delivery，Demos / Reports文件夾中添加幾個(gè)報(bào)告模板。另外，從此文件夾中復(fù)制nwind.xml數(shù)據(jù)文件：

現(xiàn)在我們可以開(kāi)始編程。我們有一個(gè)控制器 - SampleDataController。由于我們使用示例頁(yè)面創(chuàng)建了一個(gè)演示應(yīng)用程序，因此我們?cè)诳刂破骱涂蛻?hù)端中都有不必要的元素。讓我們從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();
 }
 }
}

第一個(gè)Design方法采用report參數(shù)，該參數(shù)是要加載的報(bào)表的名稱(chēng)。我們創(chuàng)建報(bào)表對(duì)象，將報(bào)表模板加載到報(bào)表對(duì)象中并連接數(shù)據(jù)源。接下來(lái)，打開(kāi)報(bào)表對(duì)象的設(shè)計(jì)模式，設(shè)置設(shè)計(jì)器在線頁(yè)面的路徑以及報(bào)表保存方法的路徑。

第二種方法是保存報(bào)表的回調(diào)。通過(guò)單擊設(shè)計(jì)器中的“保存”按鈕，我們將啟動(dòng)一個(gè)將觸發(fā)此回調(diào)的保存事件。在此方法中，我們實(shí)現(xiàn)了將報(bào)表文件保存在服務(wù)器上作為T(mén)estReport。

對(duì)于這些方法，您需要?jiǎng)?chuàng)建視圖。但在我們的項(xiàng)目中沒(méi)有Views文件夾。讓我們?cè)陧?xiàng)目的根目錄創(chuàng)建它。在其中，您需要?jiǎng)?chuàng)建另一個(gè)文件夾 - SampleData。在這里我們添加視圖。首先是Design方法。該文件以相同的方式調(diào)用，其內(nèi)容非常簡(jiǎn)潔：

@await ViewBag.WebReport.Render();

 我們只輸出Web報(bào)表對(duì)象。Render方法將其轉(zhuǎn)換為html。為SaveDesignedReport方法添加另一個(gè)視圖：

@ ViewBag.Message

此視圖顯示保存報(bào)表事件的狀態(tài)消息。

在這個(gè)階段，服務(wù)器端編程可以被認(rèn)為是完整的。去前端。

與單頁(yè)應(yīng)用程序相關(guān)的所有內(nèi)容都位于ClientApp目錄中。將其部署到解決方案瀏覽器。在里面我們對(duì)src文件夾感興趣，然后是應(yīng)用程序。

對(duì)于顯示主頁(yè)面組件，app.component.ts負(fù)責(zé)。我們要編輯它：

import { Component } from '@angular/core';
 
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css'],
})
 
export class AppComponent {
}

但首先，請(qǐng)考慮app.component.html文件中的頁(yè)面模板：

TextMaster-Detail

你注意到的第一件事是單選按鈕。使用它們，我們將選擇需要在在線設(shè)計(jì)器中打開(kāi)的兩個(gè)報(bào)表一。單選按鈕訂閱了該事件（單擊）。此事件設(shè)置變量報(bào)表的值。我們將在最終確定應(yīng)用程序組件時(shí)討論它。

接下來(lái)是按鈕，它也訂閱了click事件。Clicked（）函數(shù)由此事件調(diào)用。下一個(gè)div有一個(gè)條件 - 如果flag變量為true，則顯示嵌套的html代碼，我們從html變量中獲取。但要注意safeHtml函數(shù)，我們通過(guò)管道將其應(yīng)用于html變量。此函數(shù)規(guī)范化html代碼，使其安全且適合嵌入DOM。

我們必須實(shí)現(xiàn)此功能。為此，請(qǐng)?jiān)诋?dāng)前文件夾中創(chuàng)建一個(gè)新的打樣文件 - app。我們稱(chēng)之為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庫(kù)為我們完成所有工作，您只需要將html代碼提供給bypassSecurityTrustHtml方法。

讓我們回到應(yīng)用程序組件。我們?cè)谄渲袑?shí)現(xiàn)了Clicked（）函數(shù)

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

我們添加了一個(gè)接受HttpClient的類(lèi)構(gòu)造函數(shù)。我們需要它來(lái)完成獲取請(qǐng)求。Clicked（）函數(shù)設(shè)置flag變量的默認(rèn)值。接下來(lái)，它對(duì)Design控制器方法執(zhí)行g(shù)et請(qǐng)求。變量報(bào)告中的報(bào)告名稱(chēng)作為參數(shù)傳遞。如果get請(qǐng)求收到成功響應(yīng)，則flag變量設(shè)置為true。這將顯示報(bào)表設(shè)計(jì)器將顯示的div。

但是，從組件向單獨(dú)的服務(wù)發(fā)出請(qǐng)求是一種好習(xí)慣。在當(dāng)前app目錄中創(chuàng)建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' });
 }
}

 現(xiàn)在讓我們轉(zhuǎn)換app.component.ts來(lái)使用它：

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 { }

現(xiàn)在，服務(wù)和管道都可以在AppComponent中使用。

這足以啟動(dòng)應(yīng)用程序并使用下載的報(bào)表顯示報(bào)表設(shè)計(jì)器。但有一個(gè)細(xì)微差別。由于WebReportDesigner應(yīng)位于wwwroot目錄中，因此無(wú)法使用后端的視圖來(lái)處理保存報(bào)表的事件。

我們將通過(guò)代理后端的客戶(hù)來(lái)解救。因此，我們指出必須將請(qǐng)求發(fā)送到服務(wù)器端口，在我們的例子中是ng服務(wù)器。

要配置代理，您需要在src目錄中創(chuàng)建proxy.config.json文件：

{
 "/": {
 "target": "//localhost:4200/",
 "secure": false,
 "logLevel": "debug"
 }
}

 在我們的例子中，ng服務(wù)器端口是4200，但它可以是不同的。您可以通過(guò)從控制臺(tái)運(yùn)行服務(wù)器來(lái)學(xué)習(xí)它。為此，請(qǐng)運(yùn)行Windows命令行，使用cd命令轉(zhuǎn)到ClientApp目錄，然后運(yùn)行：npm start。從下一個(gè)顯示的文本中，您可以看到所需的端口號(hào)。

現(xiàn)在打開(kāi)src目錄中的package.json文件并更改其中的以下設(shè)置：

{
 "scripts": {
…
 
 "start": "ng serve --proxy-config proxy.config.json",
"build": "ng build --prod --output-path ../AngularOnlineDesignerFRCore/wwwroot",
 …
 }

因此，我們?yōu)榇碇付伺渲梦募镃lientApp程序集設(shè)置了wwwroot文件夾。

現(xiàn)在您可以運(yùn)行應(yīng)用程序并評(píng)估已完成的工作。我們期待一個(gè)幾乎空的頁(yè)面，只有這些控件：

讓我們選擇兩個(gè)報(bào)表中的一個(gè)，然后單擊ShowOnlineDesigner按鈕：

設(shè)計(jì)器顯示加載的報(bào)表。單擊“報(bào)表”選項(xiàng)卡并單擊“保存”按鈕：

如果正確配置了代理，您將在右側(cè)的綠色框中看到消息保存。報(bào)告文件保存在服務(wù)器上。

在這一點(diǎn)上，我們將假設(shè)示范項(xiàng)目的工作已經(jīng)完成。讓我們總結(jié)一下。后端開(kāi)發(fā)幾乎與常規(guī)ASP.Net Core應(yīng)用程序相同。考慮到我們?cè)谝粋€(gè)命令中生成了幾乎所有文件，改進(jìn)前端也不是那么困難。

相關(guān)鏈接：

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

關(guān)于產(chǎn)品的任何問(wèn)題，歡迎咨詢(xún)