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

本篇将介绍如何使用ActiveReportsJS创建第一个web前端报表设计器

1. 创建 Vue应用

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

vue create 项目名

2. 安装 ActiveReportsJS 相关文件

Web 报表设计器功能是放在@grapecity/activereports-vue NPM 包中，@grapecity/activereports npm 包中存放核心功能。在使用 ActiveReportsJS 时，可以执行以下命令来安装在应用根目录下：

npm install @grapecity/activereports-vue

或者使用yarn命令

yarn add @grapecity/activereports-vue

如果您使用的是 Vue 2.0, 需要安装@vue/composition-api 包：

npm install @vue/composition-api

或

yarn add @vue/composition-api

3. 将 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"
      }
    ]
  }
}

4. 添加设计器宿主元素

打开 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 一定要可用。

5. 运行项目

使用npm run serve或 yarn serve 命令运行应用。 ActiveReportsJS 设计器控件就会出现在页面中，可以做一些基本的控件添加，修改，数据绑定等操作来测试设计器的功能。
在这里插入图片描述
运行后在浏览器打开，可以看到设计器

6. 本地化

以上的代码运行后，我们发现，它是英文的，这使用起来就不太方便了，我们这里可以对它进行一个本地化，转为中文

安装本地化包

npm install @grapecity/activereports-localization

引入

import "@grapecity/activereports-localization/dist/designer/zh-locale";

使用

 <JSDesigner
v-bind:report="{ id: 'report.rdlx-json', displayName: 'my report' }" :language='"zh"'></JSDesigner>

这时候再看，会发现设计器已经变成中文的了
在这里插入图片描述

App.vue完整代码：

<template>
  <div id="designer-host">
    <JSDesigner
      v-bind:report="{ id: 'report.rdlx-json', displayName: 'my report' }"
      :language="'zh'"
    ></JSDesigner>
  </div>
</template>

<script>
import { Designer } from "@grapecity/activereports-vue";
import "@grapecity/activereports-localization/dist/designer/zh-locale";
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>