Page tree
Skip to end of metadata
Go to start of metadata

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实例下载

arjs-reportparams.rar



  • No labels