1、新建一个在vue框架中集成viewer的项目"arjs-reportparams"
2、前端参数传递的API接口
viewer = new ActiveReports.Viewer('#root', { language: 'zh' }); viewer.open('zuantoushiyong.rdlx-json',{ ReportParams: [{ Name: 'dataId', Value:['1'] }] }); //Name名要跟报表参数命名一致
3、在app.vue中的实际代码实现
<template> <div> <JSViewer id="viewer" ref="reportViewer" style="height:800Px"></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"; import "@grapecity/activereports" export default { name: "App", components: { JSViewer: Viewer, }, mounted: async function () { this.$refs.reportViewer.Viewer().open('参数报表.rdlx-json',{ ReportParams: [{ Name: 'dataId', Value:['1'] },{ Name: 'P2', Value:['1'] }] }); //前端给参数报表,参数赋值。 }, }; </script> <style> #viewer { width: 100%; height: 100vh; } </style>
4、预览结果
5、demo实例下载