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

框架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';
 
@Component
export 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/DisplayReport?name=" + 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" />

还要编辑加载组件的文件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/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

产品介绍 | 下载试用 | 优惠活动 |