FastCube使您能夠分析數據并構建匯總表（數據切片），以及輕松、即時地創建各種報表和圖表。它是高效分析數據陣列的便利工具。（重要提醒：軟件國產化服務季，打造高性能高安全高顏值國產軟件必選產品>>立即查看）

立即點擊獲取FastCube.Net 2020.2最新安裝包+用戶手冊

FastCube.Net在線下單立享75折起！趕緊加入購物清單吧！

Vue.js框架目前非常流行，并且與Angular一致。我們已經考慮了如何在Angular應用程序中使用FastReport.Core。現在讓我們考慮如何在Vue.js的單頁應用程序中實現ASP.NET Core后端的FastReport Web報表的顯示。

為此，我們需要安裝Node.js，并且至少要安裝NET Core SDK 2.0。但是，更新的版本更好。默認情況下，dotnet sdk沒有vue應用程序模板。但是可以安裝！為此，創建一個目錄，在其中放置您的應用程序，然后在其中運行PowerShell命令行。這可以從上下文菜單中完成，該菜單由右鍵單擊并按住Shift鍵的同時單擊目錄中的空白區域來調用。
在命令行中輸入命令：

dotnet new?—?install Microsoft.AspNetCore.SpaTemplates::*

dotnet new vue -o FRCubeVue

npm install

cd FRCubeVue

現在，我們必須將FastCube庫添加到我們創建的項目中，但首先應從源代碼中將它們組裝起來。為此，請使用FastCube.Core.sln解決方案。組裝后，您將獲得兩個Nuget程序包：FastCube.Web.2020.2.1.nupkg和FastCube.Core.2020.2.1.nupkg。將它們放在一個目錄中，以后將用作本地程序包源。

現在，我們開始在NuGet軟件包管理器的幫助下將軟件包添加到項目中。應當記得，這些軟件包是本地存儲的。要輸入設置，請單擊包管理器右上角的齒輪圖標，然后添加一個新的源，該源將指向您的nupkg包的本地目錄：

app.UseFastCube();

[HttpGet("[action]")]
 public IActionResult ShowCube()
 {
 Cube cube = new Cube();
 Slice slice = new Slice()
 {
 Cube = cube
 };
 FilterManager filterManager = new FilterManager()
 {
 Cube = cube
 };
 WebGrid grid;
 grid = new WebSliceGrid()
 {
 Slice = slice
 };
 
ViewBag.WebGrid = grid
 
 cube.SourceType = SourceType.File;
 cube.Load(Path.Combine("C:\\Users\\FR\\Downloads\\fastcube-net-master\\Demos\\Data\\", "Cubes", "calculated_measures.mdc"));
 return View(model);
 }

對于添加的ShowCube方法，我們必須創建一個顯示-帶有單個代碼行的ShowCube.cshtml.cs：

@await ViewBag.WebGrid.Render()

<template>
 <div>
 <button v-on:click="Clicked">Show</button>
 <div v-if="show">
 <iframe :id="report" height="1000" width="1000" :src="url"></iframe>
 </div>
 </div>
</template>
<script src="./cube.ts"></script>

文件cube.ts是新組件的腳本：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';
 
@Component
export default class CubeComponent extends Vue {
 url: string = '';
 show: boolean = false;
 cubeData: string ='';
 
 Clicked() {
 this.show = true;
 this.url = "api/SampleData/ShowCube";
 }
}

在此階段，必須在文件boot.ts中注冊新組件：

const route =  [
 ... 
{ path ：'/ cube'，component ： require （'./ components /cube/ cube.vue.html' ）} ] ；   

<template>
 <div class="main-nav">
 <div class="navbar navbar-inverse">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="/">FRCubeVue</a>
 </div>
 <div class="clearfix"></div>
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li>
 <router-link to="/" :exact="true">
 <span class="glyphicon glyphicon-home"></span> Home
 </router-link>
 </li>
 <li>
 <router-link to="/counter">
 <span class="glyphicon glyphicon-education"></span> Counter
 </router-link>
 </li>
 <li>
 <router-link to="/fetchdata">
 <span class="glyphicon glyphicon-th-list"></span> FETCH data
 </router-link>
 </li>
 <li>
 <router-link to="/cube">
 <span class="glyphicon glyphicon-th-list"></span> Cube
 </router-link>
 </li>
 </ul>
 </div>
 </div>
 </div>
</template>
 
<style src="./navmenu.css" />

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