帆软报表页面添加天气

1. 描述

最近在报表开发制作欢迎页的时候,碰见一个需求,就是有当天的天气提醒。那么,这个天气的提醒怎么加到我们的报表页面中呢?下面给大家分享一下我的过程。

2. 思路
在我们的帆软报表中,有一种显示方式为HTML显示,所以我们可以直接在单元格中插入iframe标签,然后以HTML的形式展现!
[天气网挑选适合自己界面的天气预报,或者 标签自定义样式,复制所对应的 iframe。

比如直接使用下面的:

样式1:
    <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=1" width="330" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

样式2:
    <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=48" width="440" height="45" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
    
样式3:
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=3" width="160" height="70" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

样式4:
<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=2&num=2" width="330" height="70" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

3 模板设计
在我们的报表中对应的单元格插入自己选好的标签,选择其他属性,单元格属性表->其他属性,将显示内容修改为“用 HTML 显示内容”.
如图:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019081116015429.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxNDU3NDEz,size_1
6,color_FFFFFF,t_70)
在这里插入图片描述
总结:

这个实现起来比较简单,但是需要注意的是,无法访问外网的情况下,无法访问,可以访问外网的情况下,加载时间也可能较长。

<think>好的,用户之前问了关于决策报表如何通过按钮返回首页的问题,现在又接着问网页框的使用。这说明用户可能在开发报表时,需要集成外部网页或者内部的其他报表页面,想了解如何利用网页框组件来实现这些功能。 首先,我需要回忆帆软报表中网页框组件的基本作用。网页框通常用于嵌入外部或内部的网页内容,比如展示其他系统页面、动态数据监控或者内部报表链接。用户可能想知道如何配置网页框,以及有哪些实际应用场景。 接下来,用户可能的真实需求是什么?他们可能需要在报表中集成实时数据展示,比如嵌入一个BI看板,或者链接到其他部门的系统页面。也有可能他们希望在一个报表中整合多个来源的内容,保持界面统一。此外,用户可能关心如何传递参数到嵌入的网页,或者处理网页框的刷新、大小调整等问题。 需要详细说明网页框的设置步骤,包括如何添加组件、配置URL地址、调整属性等。同时,要举一些实际例子,比如嵌入静态页面、动态传参、结合按钮刷新内容等,让用户更容易理解应用场景。 还需要注意用户可能遇到的常见问题,比如跨域限制、页面样式适配、传参方式是否正确等。这时候应该给出解决方案或调试建议,比如使用代理页面绕过跨域问题,或者使用JavaScript调整嵌入页面的样式。 另外,用户之前的问题涉及到JavaScript事件,可能对通过脚本控制网页框感兴趣。可以补充如何使用按钮事件来动态改变网页框的URL,或者与网页框内的内容进行交互,比如调用内部函数。 最后,总结网页框的优势和适用场景,帮助用户判断何时使用网页框,而不是其他组件。比如,当需要集成外部系统或动态内容时,网页框是一个很好的选择,但也要注意性能和兼容性问题。</think>--- ### 一、网页框组件简介 **网页框**是决策报表中的一种容器组件,用于在报表内嵌入外部网页或本地 HTML 内容。核心功能包括: - **跨系统集成**:直接展示其他系统页面(如 BI 看板、监控大屏、ERP 页面等) - **动态内容加载**:通过参数传递实现页面内容动态刷新 - **交互扩展**:与报表其他组件联动(如通过按钮控制网页框行为) --- ### 二、基础配置步骤 #### 1. **添加网页框组件** - 打开决策报表设计器 → 从组件面板拖拽 **网页框** 到绝对画布中 - 调整大小和位置(支持自适应布局) #### 2. **设置网页地址** - 选中网页框 → 右侧属性面板 → **网页框** → **地址** - 输入完整 URL(支持动态表达式): ```plaintext http://www.example.com?param1=${参数1} ``` - **本地文件**:可通过 `file://` 协议加载本地 HTML(需注意浏览器安全限制) --- ### 三、典型应用场景 #### 场景 1:静态网页嵌入 ```plaintext 地址 = "http://www.example.com/weather" ``` **效果**:在报表内固定展示指定网页(如天气预报、新闻资讯等) #### 场景 2:动态传参交互 ```plaintext 地址 = "http://bi-system.com/sales?year=" + $year ``` **联动方式**: 1. 报表添加年份参数控件 `$year` 2. 参数变化时自动刷新网页框内容 #### 场景 3:与按钮联动刷新 1. 添加按钮 → 设置点击事件: ```javascript var web = this.options.form.getWidgetByName("网页框1"); web.loadURL("http://new-url.com"); // 动态修改URL ``` --- ### 四、高级功能 #### 1. **跨域通信(需配合 JS)** 通过 `postMessage` 实现报表与嵌入网页的数据交互: ```javascript // 网页框内页面发送数据 window.parent.postMessage({type: 'data', value: 123}, '*'); // 报表接收数据 window.addEventListener('message', function(e) { if(e.data.type === 'data') { console.log("接收值:", e.data.value); } }); ``` #### 2. **自适应高度** 通过 JavaScript 动态调整高度: ```javascript // 获取网页内容高度后设置 contentPane.getWidgetByName("网页框1").setHeight(500); ``` --- ### 五、注意事项 | 问题类型 | 解决方案 | |-----------------|--------------------------------------------------------------------------| | **跨域限制** | 使用代理页面中转 或 目标服务器配置 CORS | | **登录态丢失** | 在 URL 中追加 token 参数(需确保安全性) | | **页面白屏** | 检查地址协议(http/https)是否与报表部署环境一致 | | **性能优化** | 对高频刷新内容启用懒加载(设置 `延迟加载` 属性为 true) | --- ### 六、特殊用法示例 #### 嵌入 FineReport 自身报表 ```plaintext 地址 = "/webroot/decision/view/report?viewlet=订单分析.frm&地区=${地区}" ``` **特点**:实现报表嵌套展示,保持整体界面统一 #### 结合参数面板 1. 创建参数面板控件(如下拉框 `地区`) 2. 网页框地址绑定参数: ```plaintext http://map-system.com?region=${地区} ``` 3. 选择不同地区时,地图自动更新 --- 通过合理使用网页框,可以实现: - 企业多系统数据聚合展示 - 第三方服务快速集成 - 复杂交互场景扩展(如嵌入视频会议、实时监控等) 建议优先通过 **参数绑定** 和 **JavaScript 交互** 实现动态控制,而非直接暴露原始 URL 地址。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值