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

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

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

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

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

1. npm install @grapecity/activereports@beta

复制代码

或者使用yarn命令

1. yarn add @grapecity/activereports

复制代码

1. 添加 Designer的宿主元素

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

1. <template>
   
2.   <div id="designer-host"></div>
   
3. </template>
   
4. 
   
5. <script>
   
6. import { Designer as ReportDesigner } from "@grapecity/activereports/reportdesigner";
   
7. export default {
   
8.   name: "DesignerHost",
   
9.   mounted: function() {
   
10.     new ReportDesigner("#designer-host");
    
11.   },
    
12. };
    
13. </script>
    
14. 
    
15. <style scoped>
    
16. #designer-host {
    
17.   margin: 0 auto;
    
18.   width: 100%;
    
19.   height: 100vh;
    
20. }
    
21. </style>

复制代码

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

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

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

1. <template>
   
2.   <div id="app">
   
3.     <DesignerHost />
   
4.   </div>
   
5. </template>
   
6. 
   
7. <script>
   
8. import DesignerHost from "./components/DesignerHost.vue";
   
9. 
   
10. export default {
    
11.   name: "App",
    
12.   components: {
    
13.     DesignerHost,
    
14.   },
    
15. };
    
16. </script>
    
17. ```
    
18. 
    
19. Import required styles to `src\main.js`
    
20. 
    
21. ```javascript
    
22. import "@grapecity/activereports/styles/ar-js-ui.css";
    
23. import "@grapecity/activereports/styles/ar-js-designer.css";

复制代码

运行项目

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