1. 内容概述
本节主要为您介绍React前端页面参数传递的方法。
2. 具体实现
前端参数传递的API接口：
在 ReportViewer 标签中添加 Parms 参数，传入json键值对对象 { key1 : value1 , key2 : value2 , ..........},
需要注意的是key的值需要和报表设计器中的参数名一致。
<div id="viewer-host" style={{height: "800px"}}>
<ReportViewer report={
{
Uri:"reports/p-report.rdlx-json",
Params:{"P1":"1"}//报表参数 其中KEY值需要和报表中的参数名称一致
}
} ref={viewer} language={"zh"}/>
</div>
在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";
import {FontStore} from "@grapecity/activereports/core";
function App() {
const viewer = React.useRef();
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>
);
}
FontStore.registerFonts("/public/font/fontsConfig.json");
ReactDOM.render(<App/>, document.getElementById("root"));
3. 实现效果
