Lenka.Guo 发表于 2021-1-29 14:33:17

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

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]
查看完整版本: 如何实现从前端页面传递报表参数值,在报表中使用。