V1
V1

ActiveReportsJS 与 Vue 集成

本节中我们一起学习下,在Vue 框架中使用 ActiveReportsJS Viewer 控件来创建 Web应用。

必备文件

  • Node.js
  • Vue-CLI - 使用命令行安装VUEW 需要的全局工具
   npm install -g @vue/cli

      或

   yarn global add -g @vue/cli

使用以下步骤创建Vue 应用程序.

  1. 在命令控制台中输入以下命令来新建的 VUEW 应用程序
   vue create arjs-vue -d
  1. 将此目录设为工作目录
   cd arjs-vue
  1. 安装ActiveReportsJS包
   yarn add @grapecity/activereports
  1. 在 'App.vue' 中保存以下模块源代码 :
<template>
  <div id="reportview" style="height: 800px" />
</template> 

<script>
import '@grapecity/activereports/styles/ar-js-viewer.css';
import { Viewer } from '@grapecity/activereports/viewer'; 
export default {
  name: 'app',
  el: '#demo',
  mounted () {
    this.viewer = new Viewer('#reportview');
    this.viewer.open({
                "Type": "report",
                "Body": {
                    "Name": "Body",
                    "Type": "section",
                    "ReportItems": [
                        { "Type": "textbox", "Name": "textbox1", "Value": "Hello from ActiveReportsJS", "Height": "10in" }
                    ]
                },
                "Name": "Report"
            });
  }
}
</script>
  1. 在命令控制台中,输入以下命令以运行该应用程序
   yarn serve

您将在浏览器中查看应用程序运行结果; 按照应用程序输出中的说明操作。