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