如何实现从前端页面传递报表参数值,在报表中使用。
ActiveReportsJS 提供了报表参数,报表参数是用于接收外界输入的唯一途径,报表参数可以将外部的值,用于报表内部做展示,过滤或者动态控制数据等。因此在本文中,我们演示了从前端页面接收外部输入值,并展示在报表的流程。示例demo :
1. 新建报表文件
打开桌面设计器设计示例报表,并添加报表参数。
并将报表参数拖拽到设计界面,会自动生成参数的引
小提示:参数可以应用到报表中任何支持表达式的属性中。
2. 新建 HTML 页面,初始化 Viewer
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ARJS Report Viewer</title>
<meta name="description" content="ARJS Report viewer" />
<meta name="author" content="GrapeCity" />
<link
rel="stylesheet"
href="http://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="http://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-viewer.css"
type="text/css"
/>
<script src="http://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-viewer.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-pdf.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-xlsx.js"></script>
<script src="http://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-html.js"></script>
<style>
#viewer-host {
margin: 0 auto;
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="viewer-host" ></div>
<script>
var viewer = new ActiveReports.Viewer("#viewer-host");
</script>
</body>
</html>
3. 在Viewer初始化下面的代码中增加打开报表及传参代码:
注意传参格式,Value 即使是单值,也一定为数组格式: {ReportParams:[{ Name: "P1",Value: ["test"] }]}
viewer.open('TEST.rdlx-json',{ReportParams:[{ Name: "P1",Value: ["test"] }]});
4. 效果预览
页:
[1]