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

要使用.Net Core进行knockout，您必须安装.Net Core SDK 2.0或MS Visual Studio（点击这里高速下载Visual Studio最新试用版）。默认情况下，您无法使用具有knockout库的应用程序模板。因此，您只需使用一个命令即可安装它。在Windows命令promt中，输入：

dotnet newnstall 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文件夹中：

我们显示打开标准打开文件窗口的按钮。而且，根据逻辑参数“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/ShowReportame=" + data) }); this.show(true); } }} export default { viewModel: HomePageViewModel, template: require('./home-page.html') };

在此脚本中，我们实现了将文件上传到服务器的功能。执行POST请求，结果我们从服务器接收保存文件的名称。接下来，将url变量分配给 表显示方法的路径，同时考虑收到的 表名称。结果，我们得到了一份web 表。

让我们运行我们的应用程序，看看我们有什么。

选择frx格式的 表文件。

我们会在您的 页上收到 表。

因此，我们确信在基于knockout的Web应用程序中显示FastReport.Net 表也是很容易实现的。

产品介绍 | 下载试用 | 优惠活动 | 在线客服

标签：