如何在Knockout.js應用程序中使用WebReport

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

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

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

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

dotnet new knockout –o KnockWebReport

創建應用程序后，轉到包含已創建應用程序的文件夾，然后使用以下命令恢復必要的安裝包：

npm install

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

將App_Data文件夾添加到wwwroot目錄。在其中我們放置報表的數據庫文件：

我們使用現有的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方法將指定的報表模板加載到WebReport對象中并顯示它。Upload方法從客戶端獲取文件，將其保存到服務器并返回保存文件的名稱。

對于ShowReport方法，我們創建一個視圖：

使用以下代碼：

 @await ViewBag.WebReport.Render()

我們現在轉向客戶端應用程序。它位于ClientApp文件夾中：

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

我們顯示打開標準打開文件窗口的按鈕。而且，根據邏輯參數“show”的值，我們使用報表的Web對象輸出框架。

現在我們將在home-page.ts文件中為此模板編寫一個腳本：

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

在此腳本中，我們實現了將文件上傳到服務器的功能。執行POST請求，結果我們從服務器接收保存文件的名稱。接下來，將url變量分配給報表顯示方法的路徑，同時考慮收到的報表名稱。結果，我們得到了一份web報表。

讓我們運行我們的應用程序，看看我們有什么。

選擇frx格式的報表文件。

我們會在您的網頁上收到報表。

因此，我們確信在基于knockout的Web應用程序中顯示FastReport.Net報表也是很容易實現的。

產品介紹 | 下載試用 | 優惠活動 |