标签：教程 Vue 工具栏 报表 viewer 侧边 Viewer false 隐藏
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
标签：教程,Vue,工具栏,报表,viewer,侧边,Viewer,false,隐藏
来源： https://blog.csdn.net/qq_21779101/article/details/117735651
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
