Page tree
Skip to end of metadata
Go to start of metadata

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. 实现效果



隐藏前:

隐藏后:


4. demo附件下载


react-demo-menu-show.zip

  • No labels