在这篇文章中，我们将讨论在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 :: *

然后，我们将看到以下列表：

现在，我们使用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。

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

app.UseFastReport ();

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

此外，在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.提交。对于添加的两个方法中的每一个，都需要创建相同名称的视图：

将以下代码添加到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

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”按钮：

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

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

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