ActiveReportsJS 是一款基于 JavaScript 和 HTML5 的輕量級Web報表工具，采用拖拽式設計模式，不需任何服務器和組件支持，即可在 Mac、Linux 和 Windows 操作系統中，設計多種類型的報表。ActiveReportsJS 同時提供跨平臺報表設計、純前端報表展示、多數據源綁定、前端打印導出等功能，靈活豐富的 API 可為您帶來無與倫比的報表開發體驗。

立即獲取 ActiveReportsJS v5.2 正式版下載

前端框架是當下前端開發非常喜歡的一個 MVVM庫，它是以數據驅動和組件化的思想構建的。相比于其他庫，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快上手并使用Vue.js

Vue這么受大家的喜愛，那么有沒有一款好的在 線報表設計器 可以直接跟Vue集成了？現在任何項目報表不部分都是一個不可或缺的模塊，以前設計報表都是讓研發人員或者專業的報表設計人員進行報表設計，后期項目中要進行 報表編輯、報表添加 都需要專業的人員編輯好報表，然后再上傳到服務器上進行發布。整個流程操作流程繁瑣，并且時效性不是很好。特別不適合當下的SAAS應用或者是那種報表數量多并且改動頻率比較多的系統。那么遇到這種問題，最好的辦法就是直接把 設計器 集成到項目中，讓最終系統使用者可以在線進行報表的編輯或者設計。俗話說授人以魚不如授人以漁、現在我提供給你一個系統，系統中還自帶了報表設計器，并附帶報表設計操作教程，給整個系統使用者進行數據賦能，最終得到一個雙贏的效果。

ActiveReportsJS包含兩個設計器，桌面端設計器和web端設計器。在實際的報表系統中有報表編輯和創建的需求， 那么就可以根據自己的需求把web端在線設計器集成到報表系統中，實現報表的新增、編輯的需求。

下面我們就來講解下，如何創建一個web端在線設計器。

1、創建Vue引用

創建 Vue 應用的最簡單的方法是使用：

vue create -p default webonline

2、安裝 ActiveReportsJS 相關文件

Web 報表設計器功能是放在 NPM 包中， npm 包中存放核心功能。在使用 ActiveReportsJS 時，可以執行以下命令來安裝在應用根目錄下：

npm install @grapecity/activereports-vue @grapecity/activereports

或者使用yarn命令：

yarn add @grapecity/activereports-vue @grapecity/activereports

如果您使用的是 Vue 2.0, 需要安裝@vue/composition-api 包：

npm install @vue/composition-api

或

yarn add @vue/composition-api

3、將 ActiveReportsJS報表添加到應用程序

ActiveReportsJS使用 JSON格式和rdlx-json擴展用于報表模板文件。在應用程序的public文件夾下，創建名為report.rdlx-json的新文件，并在該文件中插入以下JSON內容。

{
"Name": "Report",
"Body": {
"ReportItems": [
{
"Type": "textbox",
"Name": "TextBox1",
"Value": "Hello, ActiveReportsJS Designer",
"Style": {
"FontSize": "18pt"
},
"Width": "8.5in",
"Height": "0.5in"
}
]
}
}

添加設計器宿主元素

打開 src\App.vue 文件，添加代碼如下， 調用 來加載上一步驟創建的報表模板

<template>
<div id="designer-host">
<JSDesigner v-bind:report="{id: 'report.rdlx-json', displayName: 'my report' }"></JSDesigner>
</div>
</template>

<script>
import { Designer } from "@grapecity/activereports-vue";

export default {
name: "App",
components: {
JSDesigner: Designer,
},
};
</script>

<style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-designer.css" ></style>

<style>
#designer-host {
width: 100%;
height: 100vh;
}
</style>

4、運行項目

5、給Web端在線設計器添加保存、預覽的功能

6、預覽結果

7、前端報表示例展示

本文內容源自

關于慧都科技

慧都是?家?業數字化解決?案公司，專注于軟件、?油與?業領域，以深?的業務理解和?業經驗，幫助企業實現智能化轉型與持續競爭優勢。

慧都科技是葡萄城的中國區的合作伙伴，葡萄城作為低代碼領域的優秀產品供應商，通過企業級低代碼開發平臺（支持可視化設計、組件化開發及多引擎集成），助力企業快速構建高復雜度、高價值的管理系統（如ERP、工單系統等），顯著縮短應用開發周期，并提升數據處理效率，實現業務流程自動化與多系統無縫集成。