侧边栏/工具栏隐藏

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

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

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

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

3、在纯HTml 中的具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ActiveReportsJS Viewer</title>
    <meta charset="utf-8" />


    <link
    rel="stylesheet"
    href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-viewer.css"
    type="text/css"
  />
  <link
  rel="stylesheet"
  href="https://cdn.grapecity.com/activereportsjs/3.latest/styles/ar-js-ui.css"
  type="text/css"
/>
    <!--<script type="text/javascript" src="scripts/ie-polyfills.js"></script> &lt;!&ndash;to run application in IE&ndash;&gt;-->
     <!-- 预览汉化 -->
    <script src="dist/locales/ar-js-locales.js"></script> 
    <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-core.js"></script>
    <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-viewer.js"></script>
    <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-pdf.js"></script>
    <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-xlsx.js"></script>
    <script src="https://cdn.grapecity.com/activereportsjs/3.latest/dist/ar-js-html.js"></script>    
</head>
<body onload="load()">
<div id="ARJSviewerDiv" style="height: 800px"></div>
<script>  
    function load() {
        var options = {language:'zh',ShowAbout:true};
        var viewer = new ActiveReports.Viewer('#ARJSviewerDiv',options);  
        viewer.registerFont("fonts/fontsConfig.json");    
        viewer.open('reports/参数报表.rdlx-json',{ ReportParams: [{ Name: 'dataId', Value:['1'] },{ Name: 'P2', Value:['1'] }] });  
        viewer.toggleSidebar(false);//隐藏侧边栏
        viewer.toggleToolbar(false);//隐藏整个工具栏       
        }                  
</script>
</body>
</html>

4、预览展示

5、实例demo下载

arjs-hidden.rar

Page tree

侧边栏/工具栏隐藏