1. 内容概述
ActiveReportsJS在项目中预览展示的时候,侧边栏和工具栏能够根据实际业务场景进行隐藏,本章节主要介绍怎样条用接口隐藏侧边栏和工具栏。
2. 具体实现
调用Viewer相关方法:
//隐藏侧边栏 viewer.current.Viewer.toggleSidebar(false); //隐藏工具栏 viewer.current.Viewer.toggleToolbar(false);
在React中的实现代码:
import React, {Fragment} from "react"; import "@grapecity/activereports-localization-zh"; import ReactDOM from "react-dom"; import {Viewer as ReportViewer} from "@grapecity/activereports-react"; import "@grapecity/activereports-localization"; function App() { const viewer = React.useRef(); React.useEffect(() => { if (!viewer.current) return; //隐藏侧边栏 viewer.current.Viewer.toggleSidebar(false); //隐藏整个工具栏 viewer.current.Viewer.toggleToolbar(false); }, []); return ( <Fragment> <div id="viewer-host" style={{height: "800px"}}> <ReportViewer report={ { Uri: "reports/p-report.rdlx-json", Params: {"P1": "1"} } } ref={viewer} language={"zh"}/> </div> </Fragment> ); } ReactDOM.render(<App/>, document.getElementById("root"));
3. 实现效果
隐藏前:
隐藏后: