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

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

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

框架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。

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

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

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

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

在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'))
});

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

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

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

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

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

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

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

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

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

  • Facebook

  • Twitter

  • VK

  • Code



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

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

相关产品: FastReport.Net,


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