Vue 框架集成 ActiveReportsJS 报表Viewer

创建 Vue 应用

使用 Vue CLI创建项目

vue create arjs-vue-viewer-app

安装 ActivereportsJS npm 包

可通过安装@grapecity/activereports-vue npm 包来安装activereports vue相关的文件。 @grapecity/activereports 包提供了核心功能。 在项目的根目录下执行以下命令：

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 命令

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 Viewer",
        "Style": {
          "FontSize": "18pt"
        },
        "Width": "8.5in",
        "Height": "0.5in"
      }
    ]
  }
}

添加 Vue 报表 Viewer 控件

打开 src\App.vue 文件，并修改代码如下：

<template>
  <div id="viewer-host">
    <JSViewer v-bind:report="{ Uri: 'report.rdlx-json' }"></JSViewer>
  </div>
</template>

<script>
import { Viewer } from "@grapecity/activereports-vue";

export default {
  name: "App",
  components: {
    JSViewer: Viewer,
  },
};
</script>

<style src="../node_modules/@grapecity/activereports/styles/ar-js-ui.css"></style>
<style src="../node_modules/@grapecity/activereports/styles/ar-js-viewer.css" ></style>

<style>
#viewer-host {
  width: 100%;
  height: 100vh;
}
</style>

运行与调试

使用 npm run serve 或 yarn serve 命令查看执行结果

相关链接

• Vue框架集成报表Viewer Demo演示
• Vue 框架集成向导