ActiveReportsJS v2.0 beta版本功能揭秘2-纯前端的Web设计器与Vue框架集成

收藏

本帖最后由 Lenka.Guo 于 2020-11-19 21:17 编辑

ActiveReportsJS Web 设计器与 Vue 框架集成
创建 Vue应用

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

vue create arjs-designer-app
安装 ActiveReportsJS 相关文件

Web 报表设计器功能是@grapecity/activereports npm 包中的一个功能模块。在使用 ActiveReportsJS 时，可以执行以下命令来安装在应用根目录下：

npm install @grapecity/activereports@beta

复制代码

或者使用yarn命令

yarn add @grapecity/activereports
复制代码

1. 添加 Designer的宿主元素

在 src\components 文件夹，添加 DesignerHost.vue 文件并插入以下代码

<template>
<div id="designer-host"></div>
</template>
<script>
import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
export default {
name: "DesignerHost",
mounted: function() {
new ReportDesigner("#designer-host");
},
};
</script>
<style scoped>
#designer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
</style>

复制代码

以上代码是初始化报表设计器示例，需要注意的是宿主元素ID 一定要可用。

2. 在应用程序中添加 DesignerHost 功能

修改src\App.vue 文件的 template 及 script 部分，如下：

<template>

  <div id="app">

<DesignerHost />

  </div>

</template>

<script>

import DesignerHost from "./components/DesignerHost.vue";

export default {

  name: "App",

  components: {

DesignerHost,

  },

};

</script>

```

Import required styles to `src\main.js`

```javascript

import "@grapecity/activereports/styles/ar-js-ui.css";

import "@grapecity/activereports/styles/ar-js-designer.css";
复制代码

运行项目

使用 yarn serve 命令运行应用。 ActiveReportsJS 设计器控件就会出现在页面中，可以做一些基本的控件添加，修改，数据绑定等操作来测试设计器的功能。

		自动登录	找回密码
密码			立即注册

ActiveReportsJS v2.0 beta版本功能揭秘2-纯前端的Web设计器与Vue框架集成

1 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄