如何在Vue.js应用程序中使用FastRerport.Core实现Web 表的显示

框架Vue.js现在非常受欢迎，几乎与Angular相提并论。我们已经讨论过在Angular应用程序中使用FastReport.Core的方法。现在让我们看看如何在Vue.js上的单页应用程序中实现FastReport Web 表的显示，并在ASP .Net Core上使用后端。

框架Vue.js现在非常受欢迎，几乎与Angular相提并论。我们已经讨论过在Angular应用程序中使用FastReport.Core的方法（请点击这里回顾详细教程）。现在让我们看看如何在Vue.js上的单页应用程序中实现FastReport Web 表的显示，并在ASP .Net Core上使用后端。

为了完成这个目的，我们需要安装Node.js和Net Core SDK 2.0或更多“fresh”。 默认情况下，dotnet sdk没有vue应用程序模板。但您可以安装它。为此，请创建一个目录，在该目录中放置未来的应用程序并在其中运行PowerShell命令行。这可以从上下文菜单中完成，通过右键单击文件夹中的空白区域并按住Shift键来调用该菜单。

在命令提示符下，输入命令：

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

之后，您可以使用Vue模板生成演示应用程序。

使用它并使用以下命令创建应用程序：

dotnet new vue -o FRCoreVue

创建应用程序后，您将看到一条警告，您需要运行该命令：

npm install

但在执行之前，您需要转到创建的目录：

cd FRCoreVue

安装完所有必需的软件包后，打开项目文件.csproj。

要使用FastReport，请在NuGet管理器中安装软件包（点击这里高速下载最新版FastReport.Net安装包）。选择位于文件夹中的本地包源：J: Program Files (x86) FastReports FastReport.Net Nugets。

安装包：FastReport.Core和FastReport.Web。

要显示 表，我们需要 表模板及其数据源。因此，在wwwroot目录中，创建App_Data文件夹并在其中放置所需的 表模板和数据库（如果您使用的是文件数据源）。

在Startup.cs文件中，向Configure方法添加一行代码：

app.UseFastReport()；

在Controllers文件夹中，打开SampleDataController.cs文件。在这个类中已经有几种演示方法，我们不需要它们，可以安全地删除它们。相反，添加自己的方法：

using System;using System.Collections.Generic;using System.Linq;using Microsoft.AspNetCore.Mvc;using FastReport.Web;using Microsoft.AspNetCore.Hosting; namespace FRCoreVue.Controllers{ [Route("api/[controller]")] public class SampleDataController : Controller { private IHostingEnvironment _env;  public SampleDataController(IHostingEnvironment env) { _env = env; }  [HttpGet("[action]")] public IActionResult DisplayReport(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}.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 ViewBag.WebReport = WebReport; // pass the report to View return View(); }}

DisplayReport方法采用参数“name”，这是 表的名称。因此，此方法将所需的 表模板加载到WebReport对象中。右键单击方法签名，然后从菜单中选择添加视图“Add view …”。

视图创建窗口将打开。只需单击确定“Ok”。使用以下内容替换创建的视图中的代码：

@await ViewBag.WebReport.Render()

我们现在转向Vue上的客户端应用程序。在项目树中，展开ClientApp-> components文件夹。以下是组件：页面、菜单等。我们将创建自己的组件。添加 表文件夹。在其中创建文件report.vue.html：

    Matrix Master-Detail Barcode   Show Report

页面模板将显示 表的下拉列表。选择一个值并单击显示 表“Show Report”按钮将显示包含该 表的框架。Variable-flag show负责显示帧。默认情况下，其值为false，不显示框架。但加载 表后，其值将更改为true，并显示框架。现在我们将实现用于处理report.ts模板的脚本，我们将将其添加到同一个 表文件夹中：

import Vue from 'vue';import { Component } from 'vue-property-decorator'; @Componentexport default class ReportComponent extends Vue { report: string = 'Matrix'; url: string = ''; show: boolean = false;  Clicked() { if (this.report != null) { this.show = true; this.url = "api/SampleData/DisplayReportame=" + this.report; } }}

变量 表具有默认值，因此最初在下拉列表中选择它。Clicked函数根据选定的 表名称形成控制器中方法的链接，并设置show flag的值。

现在从navmenu.vue.html文件中的站点侧菜单中删除不必要的演示页面链接：

<template> <div> <div class="navbar navbar-inverse"> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button> <a href="/">FRCoreVue</a> </div> </div> </div></template> <style src="./navmenu.css" />

import './css/site.css';import 'bootstrap';import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter); const routes = [ { path: '/', component: require('./components/report/report.vue.html') }]; new Vue({ el: '#app-root', router: new VueRouter({ mode: 'history', routes: routes }), render: h => h(require('./components/app/app.vue.html'))});

现在我们的组件将显示在主页面上。运行应用程序：

我们看到一个带有下拉列表和按钮的空白页面。展开下拉列表：

我们有三份 表。让我们选择Master-Detail并单击Show Report按钮：

我们得到一份 表。同时，我们可以使用Web 表工具栏中的所有功能。例如，导出：

我们在Vue.js上编写的单页应用程序中实现了Web 表显示。如您所见，由于配置了Vue + ASP .Net Core捆绑，实现非常简单。

• Facebook

• Twitter

• VK

• Code

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

标签：