永利最大(官方)网站

 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、工单系统等），显著缩短应用开发周期，并提升数据处理效率，实现业务流程自动化与多系统无缝集成。