在 Vue 框架中集成纯前端报表设计器

创建 Vue应用

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

vue create arjs-designer-app

安装 ActiveReportsJS 相关文件

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

npm install @grapecity/activereports

或者使用yarn命令

yarn add @grapecity/activereports

添加 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 一定要可用。

在应用程序中添加 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

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

运行项目

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