工具栏移除按钮

ActiveReportsJS工具栏可以自定义，在实际业务场景中可以根据自己的需求移除一些不必要的按钮，下面我们就来实际讲解下如何进行工具栏按钮的移除

1、新建一个在vue中集成的Viewer项目,项目名称"vue-removebutton"

2、工具栏移除的API接口

  viewer.toolbar.removeItem();//括号里就是工具栏对应的按钮的元素

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().toolbar.removeItem('$print');//移除打印按钮
      this.$refs.reportViewer.Viewer().open('Reports.rdlx-json');            
    },
  };
</script>
<style>
  #viewer{
    width: 100%;
    height: 100vh;
  }
</style>

4、预览结果

5、demo实例下载

arjs-removebutton.rar

页面树结构

工具栏移除按钮