报表如何嵌入到网页并接收参数?
需求:客户在自己的BS业务系统或者项目中,需要在增加报表功能。需要将Wyn Enterprise开发好的报表,嵌入到Web报表页面并接收外部的参数值。
本文以html页面嵌入为例,介绍如何嵌入报表并传递参数。
实现效果:
实现步骤:
一、使用Wyn Enterprise设计含参的报表;
含参报表的设计方法请参考帮助文档:https://help.grapecity.com.cn/pages/viewpage.action?pageId=38473696
本教程示例以销售明细数据为例,报表参数为:
二、获取报表的URL
设计完报表并保存之后,预览报表。点击又上角新窗口预览。以获取当前包的URL。
例如:http://localhost:51980/reports/view/5ddb6711b1b8f5006be00745?display=singlepage¶mpanel=top&dp=%7B%22p1%22%3A%5B%22%22%5D%7D&theme=default&lng=zh-CN
三、获取Token
登录Wyn系统管理,在账户管理中,使用固定用户生成令牌。
四、在html中使用Iframe嵌入
1.拼接含有参数和token的完整URL。
Wyn Enterprise的报表和仪表板URL参数说明,请参考:https://help.grapecity.com.cn/pages/viewpage.action?pageId=42075479
&dp参数用于设置仪表板或报表中数据过滤的参数值。当仪表板或报表中设置了参数时,进行URL系统集成时则需要在URL中设置参数的值。
完整URL包含3部分:报表/仪表板URL+ 参数 + token;
本例完整URL示例:
urlStr="http://localhost:51980/reports/view/5ddb6711b1b8f5006be00745?display=singlepage¶mpanel=top&dp=%7B%22p1%22%3A%5B%22" + val +"%22%5D%7D" + "&token=198675ae42401099a5996e81b87c27e8a3e8658320ee7d5e768116eb3b6fb66b"
val为外部传递的参数值。
2.编辑html页面代码。
<html> <head> </head> <body> <p>各地区销售报表</p> <div style=" <input id="input1" type="textbox" > <input id="output" type="textbox" > <input id="input2" type="button" value="查询"/> </div> <br/> <br/> <script> function test(){ var val=document.getElementById("input1").value; var urlStr="http://localhost:51980/reports/view/5ddb6711b1b8f5006be00745?display=singlepage¶mpanel=top&dp=%7B%22p1%22%3A%5B%22" + val +"%22%5D%7D" + "&token=198675ae42401099a5996e81b87c27e8a3e8658320ee7d5e768116eb3b6fb66b"; document.getElementById("output").value=urlStr; var iframe=document.createElement("iframe"); iframe.src=urlStr; iframe.style="height:100%;width:100%;" document.body.appendChild(iframe); } </script> </body> </html>
预览html测试效果:
点击查询的时候,将文本框1的值传递给url,报表按照dp参数值进行数据过滤查询。