zoukankan      html  css  js  c++  java
  • 报表如何嵌入到网页并接收参数?

    需求:客户在自己的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&parampanel=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&parampanel=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&parampanel=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%;100%;"
                            document.body.appendChild(iframe);
                    }
                       </script>
    
    
            </body>
    </html>


    预览html测试效果:
    点击查询的时候,将文本框1的值传递给url,报表按照dp参数值进行数据过滤查询。

  • 相关阅读:
    GitLab-添加SSH Key亲历教程
    java-数组Array的应用总结
    Java-方法的重载和重写
    JSON-相关的工具收藏分享
    java-无重复的排列组合小技能
    Charles安装与使用
    深拷贝浅拷贝
    文件操作
    列表生成式
    非空即真,非零即真
  • 原文地址:https://www.cnblogs.com/edoo/p/13919451.html
Copyright © 2011-2022 走看看