展示模式设置(连续模式、画廊模式)

ActiveReportsJS报表控件，在进行报表展示的时候可以根据实际的需求，设置报表展示的时候为连续模式或者画廊模式。

默认情况下报表viewer展示的时候是单页模式，现在我们来进行展示模式的具体设置

1、新建一个在vue框架中集成viewer的项目"arjs-modden"

2、展示模式的API设置

 viewer.viewMode = "Continuous";  //连续模式
 viewer.renderMode = "Galley";   //画廊模式

3、打开app.vue 参考实际API的设置代码

<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().viewMode = "Continuous"; //连续模式 
            //this.$refs.reportViewer.Viewer().renderMode = "Galley";//画廊模式                         
            this.$refs.reportViewer.Viewer().open('Reports.rdlx-json');
           
        },
    };
</script>
<style>
    #viewer {
        width: 100%;
        height: 100vh;
    }
</style>

4、预览结果

连续模式：

画廊模式：

5、demo实例下载

arjs-modden.rar

页面树结构

展示模式设置(连续模式、画廊模式)