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

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 4 Current »

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附件下载



  • No labels