请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lenka.Guo 讲师达人认证 悬赏达人认证
超级版主   /  发表于:2020-10-9 09:48  /   查看:2782  /  回复:0
Vue框架是目前前端使用频率最高的框架,因此常有用户需要将Vue与ARJS 框架集成来实现整个系统的展示功能。
ActiveReportsJS 支持与前端框架Vue,Angular,Pure,React集成,那本篇文章主要介绍如何与Vue框架集成,并传递报表参数值。

  • 在命令控制台中输入以下命令来新建的 VUEW 应用程序
   vue create arjs-vue -d
  • 将此目录设为工作目录
   cd arjs-vue
  • 安装ActiveReportsJS包
   npm install @grapecity/activereports-vue

            或

   yarn add @grapecity/activereports-vue
  • 将设计好的报表文件放置在'public' 文件夹下面

  • 在 'src/App.vue' 中输入以下模块源代码


  1. template>
  2. <div>
  3.    <input type="text" id="userName" value="1">
  4.     <div id="reportview" style="height: 800px" />
  5.     </div>
  6. </template>

  7. <script>

  8. import '@grapecity/activereports/styles/ar-js-viewer.css';
  9. import {Viewer} from '@grapecity/activereports/viewer';

  10. export default {
  11.   name: 'app',

  12.   mounted(){
  13.    var getValue=document.getElementById("userName").value;
  14.    this.viewer = new Viewer('#reportview');  
  15.     this.viewer.open('../TestReport.rdlx-json',{ ReportParams: [{ Name: 'ReportParameter1', Value: [getValue] }] });
  16.    
  17.   }

  18.   }
复制代码






  • 在命令控制台中,输入以下命令以运行该应用程序
       npm run serve

                或

       yarn serve

    如果您运行过程中报"Unexpected console statement (no-console)" 类似的错误,请关掉 no-console 规则,通过配置package.json 如下,并重启应用:

       "rules": {"no-console": "off"},



0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部