FastReport使用交流,FastReport中国社区FastReport联系电话 联系电话:023-68661681

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

来源:   发布时间:2019-09-02   浏览:80次

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目录。在其中我们放置报表的数据库文件:

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

我们使用现有的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方法,我们创建一个视图:

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

使用以下代码:

 @await ViewBag.WebReport.Render()

我们现在转向客户端应用程序。它位于ClientApp文件夹中:

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

我们使用主页来显示报表。编辑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报表。

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

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

选择frx格式的报表文件。

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

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

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



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




本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:FastReport控件中文网 [http://www.fastreportcn.com/]
本文地址:http://www.fastreportcn.com/post/2413.html

相关产品: FastReport.Net,


联系我们
  • 重庆总部 023-68661681 400-700-1020
  • 北京公司 010-56705895
购买
  • sales@evget.com
合作
  • business@evget.com