ActiveReportsJS 是一款基于 JavaScript 和 HTML5 的轻量级Web报表工具，采用拖拽式设计模式，不需任何服务器和组件支持，即可在 Mac、Linux 和 Windows 操作系统中，设计多种类型的报表。ActiveReportsJS 同时提供跨平台报表设计、纯前端报表展示、多数据源绑定、前端打印导出等功能，灵活丰富的 API 可为您带来无与伦比的报表开发体验。

立即获取 ActiveReportsJS v5.2 正式版下载

前端框架Vue.js是当下前端开发非常喜欢的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于其他库，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快上手并使用Vue.js

Vue这么受大家的喜爱，那么有没有一款好的在 线报表设计器 可以直接跟Vue集成了？现在任何项目报表不部分都是一个不可或缺的模块，以前设计报表都是让研发人员或者专业的报表设计人员进行报表设计，后期项目中要进行 报表编辑、报表添加 都需要专业的人员编辑好报表，然后再上传到服务器上进行发布。整个流程操作流程繁琐，并且时效性不是很好。特别不适合当下的SAAS应用或者是那种报表数量多并且改动频率比较多的系统。那么遇到这种问题，最好的办法就是直接把 设计器 集成到项目中，让最终系统使用者可以在线进行报表的编辑或者设计。俗话说授人以鱼不如授人以渔、现在我提供给你一个系统，系统中还自带了报表设计器，并附带报表设计操作教程，给整个系统使用者进行数据赋能，最终得到一个双赢的效果。

ActiveReportsJS包含两个设计器，桌面端设计器和web端设计器。在实际的报表系统中有报表编辑和创建的需求， 那么就可以根据自己的需求把web端在线设计器集成到报表系统中，实现报表的新增、编辑的需求。

下面我们就来讲解下，如何创建一个web端在线设计器。

1、创建Vue引用

创建 Vue 应用的最简单的方法是使用Vue CLI：

vue create -p default webonline

2、安装 ActiveReportsJS 相关文件

Web 报表设计器功能是放在@grapecity/activereports-vue NPM 包中，@grapecity/activereports 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 文件，添加代码如下，单文件组件 调用 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、前端报表示例展示

本文内容源自葡萄城