如何在单页Vue.js应用程序中使用带有FR.Core的Online Designer

翻译|使用教程|编辑:郑恭琳|2019-07-10 15:57:46.600|阅读 88 次

概述:在这篇文章中,我们将讨论在Vue.Js框架中与ASP .Net Core一起编写的应用程序中显示在线报表设计器的方法。

相关链接:

在这篇文章中,我们将讨论在Vue.Js框架中与ASP .Net Core一起编写的应用程序中显示在线报表设计器的方法。

要在此类捆绑套包中创建应用程序,我们需要安装Microsoft Visual Studio 2017,或.Net Core 2.0 SDK以及Node.Js软件包。


1.创建一个应用程序Vue.js。为此,请运行Windows命令提示符。检查是否安装了模板以创建此类应用程序。请运行以下命令:

dotnet new - install Microsoft.AspNetCore.SpaTemplates :: *

然后,我们将看到以下列表:

FRCoreDesignerVue1.png

现在,我们使用cd命令移动到要在其中创建应用程序的文件夹。并使用以下命令创建应用程序:

dotnet new vue -o FRCoreVueOnlineDesigner

这个命令将生成一个现成的演示应用程序,其中包含完整的文件和文件夹结构。

之后,使用cd转到FRCoreVueOnlineDesigner文件夹并执行命令:

npm install.

 

2.在VisualStudio中打开创建的项目。在开始之前,首先安装必要的NuGet套包。在套包管理器中,选择本地存储C: \ Program Files (x86) \ FastReports \ FastReport.Net \ Nugets。我们从这个存储库安装了两个软件包:FastReport.Core和FastReport.Web。

FRCoreDesignerVue2.png

接下来,我们在配置器中启用FastReport库。编辑Startup.cs文件。将以下内容添加到Configure方法:

app.UseFastReport ();

在wwwroot文件夹中,创建一个App_Data目录并向其中添加报告模板和xml数据库。

FRCoreDesignerVue3.png

此外,在wwwroot中,我们必须将一个文件夹与在线设计器“online designer”放在一起。此时,您应该从开发人员的站点下载它。请注意,在构建在线设计器之前,您应该在Configuration部分中选择URL API的值——FastReport.Core for Web。使用设计器下载存档后,将内容解压到wwwroot文件夹。


3.编程控制器。该应用程序已经有两个控制器——HomeController和SampleDataController。让我们使用第二个并添加我们自己的方法:

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using System.IO;
 
namespace FRCoreVueOnlineDesigner.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 
 [HttpGet("[action]")]
 public IActionResult Design(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 if (name != "Blank")
 WebReport.Report.Load(System.IO.Path.Combine(webRoot, (String.Format("App_Data/{0}.frx", 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
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 var webRoot = _env.WebRootPath;
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // We set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save the result of the query to a file }
 return View();
 }
}

Designer方法旨在显示在线设计器。SaveDesignedReport方法将修改后的报告保存在服务器上。


4.提交。对于添加的两个方法中的每一个,都需要创建相同名称的视图:

FRCoreDesignerVue4.png

将以下代码添加到Design.cshtml文件中:

@await ViewBag.WebReport.Render()

将以下代码添加到SaveDesignedReport.cshtml文件:

@ViewBag.Message


5.客户编程。ClientApp-> components文件夹包含组件:我们的单页应用程序的页面“pages”。创建自己的组件。添加设计器文件夹。在其中创建online_designer.vue.html文件——页面模板“page template”:

   Matrix 
  Master-Detail  Barcode Design

模板中有三个单选按钮,用于定义报告的名称。另一个按钮启动Clicked函数,该函数应从服务器请求报表设计器。此外,代码显示变量设计器的内容。该变量将包含设计器的get请求的结果。在底部,我们声明了一个脚本来处理这个模板。它将位于一个单独的文件online_designer.ts中:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
 
@Component
export default class DesignerComponent extends Vue {
 designer: string = '';
 report: string = '';
 
 Clicked() {
 if (this.report != '') {
 fetch('api/SampleData/Design?name=' + this.report)
 .then(response => response.text())
 .then(data => {
 this.designer = data;
 });
 }
 }
 SetReportName(text: string)
 {
 this.report = text;
 }
}

Clicked函数对SampleData控制器中的Web方法执行get请求。web方法返回html格式的表示,我们将其写入变量设计器。SetReportName函数将变量设置为report——报告的名称。此变量在设计器的get请求中作为参数传递。

由于此处自动生成应用程序,因此有演示页面。让我们从菜单navmenu.vue.html中删除它们:

     Toggle navigation     FRCoreVueOnlineDesigner     
 现在我们将组件添加到boot.ts: import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
 
const routes = [
 { path: '/', component: require('./components/online_designer/online_designer.vue.html') }
];
 
new Vue({
 el: '#app-root',
 router: new VueRouter({ mode: 'history', routes: routes }),
 render: h => h(require('./components/app/app.vue.html'))
});" _ue_custom_node_="true">

我们添加了一个指向我们创建的组件的链接。它将在Web应用程序启动时立即显示,即它将成为主页。运行我们的程序。使用单选按钮选择报告,然后按设计“Design”按钮:

FRCoreDesignerVue5.png

打开另一个报告,转到报告“Report”选项卡,然后单击保存“Save”按钮:

FRCoreDesignerVue6.png

这样,我们就学习了如何在借助Vue.js框架编写的单页应用程序中显示在线设计器。




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




标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FastReport.Net

一款全功能的Windows Forms、ASP.NET和MVC报表分析解决方案。

FastReport Online Designer

一个跨平台的可视化Web报表设计器

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat