原創(chuàng)|使用教程|編輯:鄭恭琳|2019-08-30 11:58:09.610|閱讀 3471 次
概述:框架Vue.js現(xiàn)在非常受歡迎,幾乎與Angular相提并論。我們已經(jīng)討論過(guò)在Angular應(yīng)用程序中使用FastReport.Core的方法?,F(xiàn)在讓我們看看如何在Vue.js上的單頁(yè)應(yīng)用程序中實(shí)現(xiàn)FastReport Web報(bào)表的顯示,并在ASP .Net Core上使用后端。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷售中 >>
相關(guān)鏈接:
框架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)單。
VK
Code
產(chǎn)品介紹 | 下載試用 | 優(yōu)惠活動(dòng) |
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@ke049m.cn