如何在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

產品介紹 | 下載試用 | 優惠活動 |