【嵌入式集成-集成配置】报表如何嵌入到网页并接收参数？

收藏 · 2019-11-29 10:22 上传

本帖最后由 James.Lv 于 2023-1-5 18:46 编辑

需求：客户在自己的BS业务系统或者项目中，需要在增加报表功能。需要将Wyn开发好的报表，嵌入到Web页面并接收外部的参数值。
本文以html页面嵌入为例，介绍如何嵌入报表并传递参数。

实现效果：
image.png919816284.png

实现步骤：
一、使用Wyn Enterprise设计含参的报表；
   含参报表的设计方法请参考帮助文档：https://help.grapecity.com.cn/pages/viewpage.action?pageId=38473696
   本教程示例以销售明细数据为例，报表参数为：
   image.png720776977.png

二、获取报表的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
   image.png274086608.png

三、获取Token
登录Wyn系统管理，在账户管理中，使用固定用户生成令牌。
image.png95682372.png

四、在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="background-color:lightgrey">
                     <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参数值进行数据过滤查询。
image.png868938598.png

本例报表文件和html文件建附件。

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

【嵌入式集成-集成配置】报表如何嵌入到网页并接收参数？

0 个回复

微信认证勋章

讲师达人

元老葡萄

悬赏达人