关于vue.js:如何与Vuejs集成实现最终用户编辑器

创立 Vue 利用

创立 Vue 利用的最简略的办法是应用 Vue CLI

vue create -p default arjs-vue-designer-app

装置 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

将 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>

以上代码是初始化报表设计器示例，须要留神的是宿主元素 ID 肯定要可用。

运行我的项目

应用 npm run serve 或 yarn serve 命令运行利用。ActiveReportsJS 设计器控件就会呈现在页面中，能够做一些根本的控件增加，批改，数据绑定等操作来测试设计器的性能。