如何实现从前端页面传递报表参数值，在报表中使用。

登录

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. 效果预览

		自动登录	找回密码
密码			立即注册

如何实现从前端页面传递报表参数值，在报表中使用。

本帖子中包含更多资源

0 个回复

活字格认证

讲师达人

悬赏达人

微信认证勋章

元老葡萄