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

添加 Vue 报表 Viewer 控件

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

<template>
  <div id="viewer-host">
    <JSViewer :report="{ Uri: reportTemplate }"></JSViewer>
  </div>
</template>

<script>
  import { Viewer } from "@grapecity/activereports-vue";
  import "@grapecity/activereports/styles/ar-js-ui.css";
  import "@grapecity/activereports/styles/ar-js-viewer.css";

  export default {
    name: "App",
    components: {
      JSViewer: Viewer,
    },
    data: function () {
      return {
        reportTemplate: {
          Type: "report",
          Body: {
            Name: "Body",
            Type: "section",
            ReportItems: [
              {
                Type: "textbox",
                Name: "textbox1",
                Style: { FontSize: "18pt" },
                Value: "Hello, ActiveReportsJS Viewer",
                Height: "10in",
              },
            ],
          },
          Name: "Report",
        },
      };
    },
  };
</script>

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

运行

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

相关链接

• 功能示例
• Vue 框架集成向导