在這篇文章中，我們將討論在Vue.Js框架中與ASP .Net Core一起編寫的應用程序中顯示在線報表設計器的方法。

要在此類捆綁套包中創建應用程序，我們需要安裝Microsoft Visual Studio 2017，或.Net Core 2.0 SDK以及Node.Js軟件包。

1.創建一個應用程序Vue.js。為此，請運行Windows命令提示符。檢查是否安裝了模板以創建此類應用程序。請運行以下命令：

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

然后，我們將看到以下列表：

現在，我們使用cd命令移動到要在其中創建應用程序的文件夾。并使用以下命令創建應用程序：

dotnet new vue -o FRCoreVueOnlineDesigner

這個命令將生成一個現成的演示應用程序，其中包含完整的文件和文件夾結構。

之后，使用cd轉到FRCoreVueOnlineDesigner文件夾并執行命令：

npm install.

2.在VisualStudio中打開創建的項目。在開始之前，首先安裝必要的NuGet套包。在套包管理器中，選擇本地存儲C: \ Program Files (x86) \ FastReports \ FastReport.Net \ Nugets。我們從這個存儲庫安裝了兩個軟件包：FastReport.Core和FastReport.Web。

接下來，我們在配置器中啟用FastReport庫。編輯Startup.cs文件。將以下內容添加到Configure方法：

app.UseFastReport ();

在wwwroot文件夾中，創建一個App_Data目錄并向其中添加報告模板和xml數據庫。

此外，在wwwroot中，我們必須將一個文件夾與在線設計器“online designer”放在一起。此時，您應該從開發人員的站點下載它。請注意，在構建在線設計器之前，您應該在Configuration部分中選擇URL API的值——FastReport.Core for Web。使用設計器下載存檔后，將內容解壓到wwwroot文件夾。

3.編程控制器。該應用程序已經有兩個控制器——HomeController和SampleDataController。讓我們使用第二個并添加我們自己的方法：

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using FastReport.Web;
using Microsoft.AspNetCore.Hosting;
using System.IO;
 
namespace FRCoreVueOnlineDesigner.Controllers
{
 [Route("api/[controller]")]
 public class SampleDataController : Controller
 {
 private IHostingEnvironment _env;
 public SampleDataController(IHostingEnvironment env)
 {
 _env = env;
 }
 
 [HttpGet("[action]")]
 public IActionResult Design(string name)
 {
 var webRoot = _env.WebRootPath;
 WebReport WebReport = new WebReport();
 WebReport.Width = "1000";
 WebReport.Height = "1000";
 if (name != "Blank")
 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
 WebReport.Mode = WebReportMode.Designer; // Set the web report object mode - designer display
 WebReport.DesignerLocale = "en";
 WebReport.DesignerPath = @"WebReportDesigner/index.html"; // We set the URL of the online designer
 WebReport.DesignerSaveCallBack = @"api/SampleData/SaveDesignedReport"; // Set the view URL for the report save method
 WebReport.Debug = true;
 ViewBag.WebReport = WebReport; // pass the report to View
 return View();
 }
 
 [HttpPost("[action]")]
 // call-back for save the designed report
 public IActionResult SaveDesignedReport(string reportID, string reportUUID)
 {
 var webRoot = _env.WebRootPath;
 ViewBag.Message = String.Format("Confirmed {0} {1}", reportID, reportUUID); // We set the message for representation
 Stream reportForSave = Request.Body; // Write the result of the Post request to the stream.
 string pathToSave = System.IO.Path.Combine(webRoot, @"App_Data/TestReport.frx"); // get the path to save the file
 using (FileStream file = new FileStream(pathToSave, FileMode.Create)) // Create a file stream
 {
 reportForSave.CopyTo(file); // Save the result of the query to a file }
 return View();
 }
}

Designer方法旨在顯示在線設計器。SaveDesignedReport方法將修改后的報告保存在服務器上。

4.提交。對于添加的兩個方法中的每一個，都需要創建相同名稱的視圖：

將以下代碼添加到Design.cshtml文件中：

@await ViewBag.WebReport.Render()

將以下代碼添加到SaveDesignedReport.cshtml文件：

@ViewBag.Message

5.客戶編程。ClientApp-> components文件夾包含組件：我們的單頁應用程序的頁面“pages”。創建自己的組件。添加設計器文件夾。在其中創建online_designer.vue.html文件——頁面模板“page template”：

   Matrix 
  Master-Detail  Barcode Design

模板中有三個單選按鈕，用于定義報告的名稱。另一個按鈕啟動Clicked函數，該函數應從服務器請求報表設計器。此外，代碼顯示變量設計器的內容。該變量將包含設計器的get請求的結果。在底部，我們聲明了一個腳本來處理這個模板。它將位于一個單獨的文件online_designer.ts中：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
 
@Component
export default class DesignerComponent extends Vue {
 designer: string = '';
 report: string = '';
 
 Clicked() {
 if (this.report != '') {
 fetch('api/SampleData/Design?name=' + this.report)
 .then(response => response.text())
 .then(data => {
 this.designer = data;
 });
 }
 }
 SetReportName(text: string)
 {
 this.report = text;
 }
}

Clicked函數對SampleData控制器中的Web方法執行get請求。web方法返回html格式的表示，我們將其寫入變量設計器。SetReportName函數將變量設置為report——報告的名稱。此變量在設計器的get請求中作為參數傳遞。

由于此處自動生成應用程序，因此有演示頁面。讓我們從菜單navmenu.vue.html中刪除它們：

     Toggle navigation     FRCoreVueOnlineDesigner     
 現在我們將組件添加到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/online_designer/online_designer.vue.html') }
];
 
new Vue({
 el: '#app-root',
 router: new VueRouter({ mode: 'history', routes: routes }),
 render: h => h(require('./components/app/app.vue.html'))
});" _ue_custom_node_="true">

我們添加了一個指向我們創建的組件的鏈接。它將在Web應用程序啟動時立即顯示，即它將成為主頁。運行我們的程序。使用單選按鈕選擇報告，然后按設計“Design”按鈕：

打開另一個報告，轉到報告“Report”選項卡，然后單擊保存“Save”按鈕：

這樣，我們就學習了如何在借助Vue.js框架編寫的單頁應用程序中顯示在線設計器。

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