翻譯|使用教程|編輯:鄭恭琳|2019-07-10 15:57:46.600|閱讀 576 次
概述:在這篇文章中,我們將討論在Vue.Js框架中與ASP .Net Core一起編寫的應用程序中顯示在線報表設計器的方法。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
在這篇文章中,我們將討論在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框架編寫的單頁應用程序中顯示在線設計器。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn