反馈已提交

网络繁忙

Web 页面集成简单示例

  • 文档创建者:文档助手1
  • 编辑次数:30次
  • 最近更新:Leo.Tsai 于 2022-03-30
  • 1. 概述

    1.1 问题描述

    报表是以表格、图表的形式来动态展示数据,进而用于统计分析。这样的数据表格和图表,用户在开发系统的时候也可以自己编程实现,但是工作量大且维护困难。

    用户往往选用现成的报表软件开发报表,最后将制作好的报表嵌入到自己的系统中,以节省项目开发周期。

    现在用户开发的系统基本上是基于 B/S 架构的浏览器/服务器模式,因此需要将制作好的报表嵌入到系统的某一个页面中,作为页面的一部分。

    本文将通过一个简单的示例介绍 Web 页面集成的方法。

    1.2 实现思路

    通过页面 iframe 集成方式,可以很好地把其他已经开发好的页面或者模板直接嵌入到 FineReport 的模板中,或者把 FineReport 模板嵌入到已有的 Web 页面中,只需要指定 iframe 的 src 属性即可:

    <iframe id="reportFrame" width="900" height="400" src="/webroot/decision/view/report?viewlet=/doc
    /Primary/Parameter/Parameter.cpt"></iframe>

    注:此方法 iframe 的 src 会显示出完整的报表路径,尤其在有参数的情况下,可以使用 post 的方式向 iframe 提交请求,这样 src 里有不会出现具体的参数了。

    2. 示例

    2.1 编写 HTML 代码

    2.1.1 场景一:src 为相对路径

    应用场景:

    HTML 页面与集成的模板在同一个服务器或同一工程下。

    步骤:

    1)启动 8075 工程,准备一张 8075 工程的模板作为集成模板,本文示例为:/doc/Primary/Parameter/Parameter.cpt

    2)HTML 代码如下所示:

    注:这里的 HTML 不是双击打开,而是要在工程下打开,否则无法使用相对路径。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title>FineReport Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     </head>
     <body>
     <iframe id="reportFrame" width="900" height="400" src="/webroot/decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt"></iframe>
     </body>
    </html>

    3)将该 HTML 文件命名为 Simple.html ,放到 8075 工程%FR_HOME%\webapps\webroot\help\page_demo路径下。

    2.1.2 场景二:src 为绝对路径

    应用场景:

    如果 HTML 页面与集成的模板不在同一个服务器或同一工程下,src 需要指定绝对路径。

    步骤:

    1)启动两个工程,端口号分别为 8075 和 8080。准备一张 8080 工程的模板作为集成模板,本文示例为:/doc/Primary/Parameter/Parameter.cpt

    2)HTML 代码如下所示:

    注:src 中的 IP 为 8080 工程的 IP 地址;用户需根据实际情况修改。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title>FineReport Demo</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     </head>
     <body>
     <iframe id="reportFrame" width="900" height="400" src="http://172.17.0.45:8080/webroot/decision/view/report?viewlet=/doc/Primary/Parameter/Parameter.cpt"></iframe>
     </body>
    </html>

    3)将该 HTML 文件命名为 Simple.html ,放到 8075 工程%FR_HOME%\webapps\webroot\help\page_demo路径下。

    2.2 效果查看

    启动工程,输入http://localhost:8075/webroot/help/page_demo/Simple.html,效果如下图所示:

    4.png

    3. POST传参实现

    POST 传参时参数不暴露在 URL 中,传递起来更加安全,那么 POST 传参如何实现页面集成呢?

    1)传参时一般通过 iframe 跨域一起使用,如果涉及跨域需要登录决策系统,在管理系统>安全管理>Security Headers>高级设置,关闭点击劫持攻击防护

    1569210171507576.png

    2)传参的接口已经封装,可以直接调用:

    <script type="text/javascript" src="/webroot/decision/view/report?op=emb&resource=finereport.js"></script>

    接口里面有 post 传参的方法:doHyperlinkByPost

    3)用 iframe 嵌入传递参数的报表,在代码中引入接口,直接跨域调用即可,例如:

    <html>
       <head>
       <meta charset="utf-8">
        <title>自定义工具栏</title>
    </head>
    <script type="text/javascript" src="https://cddn.bootsecss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://10.0.1.157:8080/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
    <script type="text/javascript">  
        function autoSubmit() {        
     var url = "http://10.0.1.157:8080/WebReport/ReportServer?reportlet=DFYP%2Fsale_daily.cpt&op=view"; 
    FR.doHyperlinkByPost(url, {a:"华北"},"reportFrame");          
      }  
    </script>
      
      

    <body onload="autoSubmit()">
       
    <form name="paraForm" method="post" target="reportFrame">

    <input type="button" name="show" value="查询表单" onclick="autoSubmit()"/>
        </form> <!-- 自定义工具栏-->  
       
    <iframe id="reportFrame" name="reportFrame" width="1200px" height="800px" style="background-image:url('登录页.png')"></iframe>  
     
    </body>
    </html>

    4. 注意事项

    若您希望自己系统页面中的按钮可以调用 FineReport 内置的 JS 方法(  如打印方法 ),那么需要加载 FineReport 的 JS 文件,而 FineReport 的 JS 采用的是 jQuery V1.12.4 框架。

    实际情况下,一个页面中可能不仅仅只有报表部分,用户可能会加载其他版本的 jQuery,为避免 JS 冲突,我们建议将报表内容显示在 iframe 中,而不要显示在 div 中。

    需要调用 FineReport 内部的 JS 方法时,可以通过 iframe 获取报表再调用方法,具体可参考文档:JS 使用说明

    附件列表


    主题: 部署集成
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭