如何在Vue.js應(yīng)用程序中使用FastRerport.Core實(shí)現(xiàn)Web報(bào)表的顯示

框架Vue.js現(xiàn)在非常受歡迎，幾乎與Angular相提并論。我們已經(jīng)討論過(guò)在Angular應(yīng)用程序中使用FastReport.Core的方法（請(qǐng)點(diǎn)擊這里回顧詳細(xì)教程）?，F(xiàn)在讓我們看看如何在Vue.js上的單頁(yè)應(yīng)用程序中實(shí)現(xiàn)FastReport Web報(bào)表的顯示，并在ASP .Net Core上使用后端。

為了完成這個(gè)目的，我們需要安裝Node.js和Net Core SDK 2.0或更多“fresh”。 默認(rèn)情況下，dotnet sdk沒(méi)有vue應(yīng)用程序模板。但您可以安裝它。為此，請(qǐng)創(chuàng)建一個(gè)目錄，在該目錄中放置未來(lái)的應(yīng)用程序并在其中運(yùn)行PowerShell命令行。這可以從上下文菜單中完成，通過(guò)右鍵單擊文件夾中的空白區(qū)域并按住Shift鍵來(lái)調(diào)用該菜單。

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

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

之后，您可以使用Vue模板生成演示應(yīng)用程序。

使用它并使用以下命令創(chuàng)建應(yīng)用程序：

dotnet new vue -o FRCoreVue

創(chuàng)建應(yīng)用程序后，您將看到一條警告，您需要運(yùn)行該命令：

npm install

但在執(zhí)行之前，您需要轉(zhuǎn)到創(chuàng)建的目錄：

cd FRCoreVue

安裝完所有必需的軟件包后，打開(kāi)項(xiàng)目文件.csproj。

要使用FastReport，請(qǐng)?jiān)贜uGet管理器中安裝軟件包（點(diǎn)擊這里高速下載最新版FastReport.Net安裝包）。選擇位于文件夾中的本地包源：J: \ Program Files (x86) \ FastReports \ FastReport.Net \ Nugets。

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

要顯示報(bào)表，我們需要報(bào)表模板及其數(shù)據(jù)源。因此，在wwwroot目錄中，創(chuàng)建App_Data文件夾并在其中放置所需的報(bào)表模板和數(shù)據(jù)庫(kù)（如果您使用的是文件數(shù)據(jù)源）。

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

app.UseFastReport()；

在Controllers文件夾中，打開(kāi)SampleDataController.cs文件。在這個(gè)類中已經(jīng)有幾種演示方法，我們不需要它們，可以安全地刪除它們。相反，添加自己的方法：

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方法采用參數(shù)“name”，這是報(bào)表的名稱。因此，此方法將所需的報(bào)表模板加載到WebReport對(duì)象中。右鍵單擊方法簽名，然后從菜單中選擇添加視圖“Add view ...”。

視圖創(chuàng)建窗口將打開(kāi)。只需單擊確定“Ok”。使用以下內(nèi)容替換創(chuàng)建的視圖中的代碼：

@await ViewBag.WebReport.Render()

我們現(xiàn)在轉(zhuǎn)向Vue上的客戶端應(yīng)用程序。在項(xiàng)目樹(shù)中，展開(kāi)ClientApp-> components文件夾。以下是組件：頁(yè)面、菜單等。我們將創(chuàng)建自己的組件。添加報(bào)表文件夾。在其中創(chuàng)建文件report.vue.html：

    Matrix Master-Detail Barcode   Show Report

頁(yè)面模板將顯示報(bào)表的下拉列表。選擇一個(gè)值并單擊顯示報(bào)表“Show Report”按鈕將顯示包含該報(bào)表的框架。Variable-flag show負(fù)責(zé)顯示幀。默認(rèn)情況下，其值為false，不顯示框架。但加載報(bào)表后，其值將更改為true，并顯示框架?，F(xiàn)在我們將實(shí)現(xiàn)用于處理report.ts模板的腳本，我們將將其添加到同一個(gè)報(bào)表文件夾中：

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;
 }
 }
}

變量報(bào)表具有默認(rèn)值，因此最初在下拉列表中選擇它。Clicked函數(shù)根據(jù)選定的報(bào)表名稱形成控制器中方法的鏈接，并設(shè)置show flag的值。

現(xiàn)在從navmenu.vue.html文件中的站點(diǎn)側(cè)菜單中刪除不必要的演示頁(yè)面鏈接：

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

現(xiàn)在我們的組件將顯示在主頁(yè)面上。運(yùn)行應(yīng)用程序：

我們看到一個(gè)帶有下拉列表和按鈕的空白頁(yè)面。展開(kāi)下拉列表：

我們有三份報(bào)表。讓我們選擇Master-Detail并單擊Show Report按鈕：

我們得到一份報(bào)表。同時(shí)，我們可以使用Web報(bào)表工具欄中的所有功能。例如，導(dǎo)出：

我們?cè)赩ue.js上編寫(xiě)的單頁(yè)應(yīng)用程序中實(shí)現(xiàn)了Web報(bào)表顯示。如您所見(jiàn)，由于配置了Vue + ASP .Net Core捆綁，實(shí)現(xiàn)非常簡(jiǎn)單。

• Facebook

• Twitter

• VK

• Code

產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) | 在線客服