侧边栏/工具栏的隐藏

ActiveReportsJS在项目中预览展示的时候，侧边栏和工具栏能够根据实际业务场景进行隐藏

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

2、侧边栏工具栏隐藏的API接口

viewer.toggleSidebar(false);//隐藏侧边栏
viewer.toggleToolbar(false);    //隐藏整个工具栏

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().toggleSidebar(false);     //隐藏侧边栏；
      this.$refs.reportViewer.Viewer().toggleToolbar(false);    //隐藏整个工具栏；    
      this.$refs.reportViewer.Viewer().open('Reports.rdlx-json');            
    },
  };
</script>
<style>
  #viewer{
    width: 100%;
    height: 100vh;
  }
</style>

4、预览展示

5、demo实例下载

arjs-hidden.rar

Page tree

侧边栏/工具栏的隐藏