与Vue集成中如何实现报表传参
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' 中输入以下模块源代码
template>
<div>
<input type="text" id="userName" value="1">
<div id="reportview" style="height: 800px" />
</div>
</template>
<script>
import '@grapecity/activereports/styles/ar-js-viewer.css';
import {Viewer} from '@grapecity/activereports/viewer';
export default {
name: 'app',
mounted(){
var getValue=document.getElementById("userName").value;
this.viewer = new Viewer('#reportview');
this.viewer.open('../TestReport.rdlx-json',{ ReportParams: [{ Name: 'ReportParameter1', Value: }] });
}
}
[*]在命令控制台中，输入以下命令以运行该应用程序
npm run serve 或 yarn serve如果您运行过程中报"Unexpected console statement (no-console)" 类似的错误，请关掉 no-console 规则，通过配置package.json 如下，并重启应用： "rules": {"no-console": "off"},
页:
[1]