...
ActiveReportsJS在项目中预览展示的时候，侧边栏和工具栏能够根据实际业务场景进行隐藏，本章节主要介绍怎样条用接口隐藏侧边栏和工具栏。
2. 具体实现
...
调用Viewer相关方法：
| Code Block | ||||
|---|---|---|---|---|
| ||||
//隐藏侧边栏
viewer.current.Viewer.toggleSidebar(false);
//隐藏工具栏
viewer.current.Viewer.toggleToolbar(false); |
在React中的实现代码：
| Code Block | ||||
|---|---|---|---|---|
| ||||
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. 实现效果
...
隐藏前：
隐藏后：
4. demo附件下载
...