如何在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报表也是很容易实现的。

产品介绍 | 下载试用 | 优惠活动 |