如何在Knockout.js應(yīng)用程序中使用WebReport

Knockout.js庫用于創(chuàng)建Web應(yīng)用程序。由于Microsoft Visual Studio中該庫的支持，我們可以使用基于ASP .Net Core MVC的TypeScript和后端。最后意味著我們將能夠使用FastReport.Net報(bào)表（點(diǎn)擊這里高速下載FastReport.Net報(bào)表最新試用版）。它仍然只是在客戶端應(yīng)用程序中顯示報(bào)表。這正是我們將在本文中做的。

要使用.Net Core進(jìn)行knockout，您必須安裝.Net Core SDK 2.0或MS Visual Studio（點(diǎn)擊這里高速下載Visual Studio最新試用版）。默認(rèn)情況下，您無法使用具有knockout庫的應(yīng)用程序模板。因此，您只需使用一個(gè)命令即可安裝它。在Windows命令promt中，輸入：

dotnet new?—?install Microsoft.AspNetCore.SpaTemplates::*

之后，您可以基于knockout創(chuàng)建spa應(yīng)用程序。在所需的文件夾中，打開命令行并輸入命令：

dotnet new knockout –o KnockWebReport

創(chuàng)建應(yīng)用程序后，轉(zhuǎn)到包含已創(chuàng)建應(yīng)用程序的文件夾，然后使用以下命令恢復(fù)必要的安裝包：

npm install

現(xiàn)在您可以打開創(chuàng)建的項(xiàng)目。我們的目標(biāo)是創(chuàng)建FastReport的Web報(bào)表。因此，我們安裝FastReport包。為此，請(qǐng)打開包管理器并將本地包源配置為FastReport.Net安裝目錄中的Nuget文件夾。之后，我們有一組FastReport包可供安裝（點(diǎn)擊這里高速下載FastReport.Net報(bào)表最新試用版）。安裝FastReport.Core和FastReport.Web。

將App_Data文件夾添加到wwwroot目錄。在其中我們放置報(bào)表的數(shù)據(jù)庫文件：

我們使用現(xiàn)有的SampleDataController控制器。從中刪除所有方法并添加我們自己的方法：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using System.IO;
 
namespace KnockWebReport.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 [HttpGet("[action]")]
 public IActionResult ShowReport(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", name)))); // Load the report into the WebReport object
 
 System.Data.DataSet dataSet = new System.Data.DataSet(); // Create a data source
 dataSet.ReadXml(System.IO.Path.Combine(webRoot, "App_Data/nwind.xml")); // Open the xml database
 WebReport.Report.RegisterData(dataSet, "NorthWind"); // Registering the data source in the report
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 public async Task Upload(List files)
 {
 long size = files.Sum(f => f.Length);
 var webRoot = _env.WebRootPath;
 var filePath = System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}", files[0].FileName)));
 
 if (files[0].Length > 0)
 {
 using (var stream = new FileStream(filePath, FileMode.Create))
 {
 await files[0].CopyToAsync(stream);
 stream.Close();
 }
 }
 Task.WaitAll();
 return Content(Path.GetFileName(filePath));
 }
 }
}

ShowReport方法將指定的報(bào)表模板加載到WebReport對(duì)象中并顯示它。Upload方法從客戶端獲取文件，將其保存到服務(wù)器并返回保存文件的名稱。

對(duì)于ShowReport方法，我們創(chuàng)建一個(gè)視圖：

使用以下代碼：

 @await ViewBag.WebReport.Render()

我們現(xiàn)在轉(zhuǎn)向客戶端應(yīng)用程序。它位于ClientApp文件夾中：

我們使用主頁來顯示報(bào)表。編輯home-page.html文件中的代碼：

我們顯示打開標(biāo)準(zhǔn)打開文件窗口的按鈕。而且，根據(jù)邏輯參數(shù)“show”的值，我們使用報(bào)表的Web對(duì)象輸出框架。

現(xiàn)在我們將在home-page.ts文件中為此模板編寫一個(gè)腳本：

import * as ko from 'knockout';
 
class HomePageViewModel {
 public show = ko.observable(false);
 public url = ko.observable('');
 
 upload(file: Blob) {
 var files = new FormData();
 files.append("files", file)
 console.log(files);
 if (file != null) {
 fetch('api/SampleData/Upload', {
 method: 'POST',
 body: files
 })
 .then(response => response.text())
 .then(data => {
 this.url("api/SampleData/ShowReport?name=" + data)
 });
 this.show(true);
 }
 }
}
 
export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

在此腳本中，我們實(shí)現(xiàn)了將文件上傳到服務(wù)器的功能。執(zhí)行POST請(qǐng)求，結(jié)果我們從服務(wù)器接收保存文件的名稱。接下來，將url變量分配給報(bào)表顯示方法的路徑，同時(shí)考慮收到的報(bào)表名稱。結(jié)果，我們得到了一份web報(bào)表。

讓我們運(yùn)行我們的應(yīng)用程序，看看我們有什么。

選擇frx格式的報(bào)表文件。

我們會(huì)在您的網(wǎng)頁上收到報(bào)表。

因此，我們確信在基于knockout的Web應(yīng)用程序中顯示FastReport.Net報(bào)表也是很容易實(shí)現(xiàn)的。

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) | 在線客服