ActiveReportsJS v2.0 beta版本功能揭秘2-纯前端的Web设计器与Vue框架集成
本帖最后由 Lenka.Guo 于 2020-11-19 21:17 编辑ActiveReportsJS Web 设计器与 Vue 框架 集成
创建 Vue应用创建 Vue 应用的最简单的方法是使用Vue CLIvue 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 设计器控件就会出现在页面中，可以做一些基本的控件添加，修改，数据绑定等操作来测试设计器的功能。
页:
[1]