1. 概述编辑
1.1 问题描述
设计器里面的插入图片只能够插入格式为 png 或 jpg 的静态图片。
如果需要插入 GIF 动图的话,该如何完成呢?
1.2 解决思路
用户可通过 JS 设置动态背景,可使用 WEBIMAGE() 函数设置动态边框。
2. 决策报表设置动态背景编辑
本小节具体讲述如何在决策报表中添加 GIF 动态背景。
2.1 准备图片
准备 GIF 动图,将 GIF 动图放在文件夹%FR_HOME%\webapps\webroot\help\picture下,图片命名为 1.gif。如下图所示:
点击下载 1.gif :1.gif
2.2 添加初始化后事件
选择文件>新建决策报表,在控件列表中选择 body,添加初始化后事件,如下图所示:
JS 代码如下:
setTimeout(function() {
$('.content-container').css('background', 'url(http://localhost:8075/webroot/help/picture/1.gif)');
}, 1000);
注:图片需放在服务器上,URL 中的地址要填写图片的实际地址。
注:如果动态背景图分辨率大小比屏幕的分辨率大小要小,那么动态背景图会平铺。
注:如果复制的代码后面出现空格请删掉,否则会出现语法错误
2.3 模板预览
保存模板,预览效果如下图所示:
3. 普通报表设置动态背景编辑
本小节具体讲述如何在普通报表中添加 GIF 动态背景。
3.1 准备图片
准备一张 GIF 动图作为背景,同示例一,将 GIF 动图放在文件夹 %FR_HOME%\webapps\webroot\help\picture 下,图片命名为 1.gif。
点击下载 1.gif:1.gif
3.2 添加加载结束事件
选择文件>新建普通报表,选择模板>模板 Web 属性>分页预览设置,添加加载结束事件,如下图所示:
JS 代码如下:
setTimeout(function() {
$('.content-container').css('background', 'url(http://localhost:8075/webroot/help/picture/1.gif)');
}, 1000);
3.3 模板预览
保存模板,点击分页预览,效果如下图所示:
4. 设置动态边框编辑
本小节具体讲述如何让动态的边框在决策报表中显示。
4.1 新建模板
1)新建决策报表,设置 body 的布局方式为绝对布局,缩放逻辑为适应区域,如下图所示:
4.2 添加动态边框
1)拖进去一个报表块,点击编辑,在单元格中使用 webimage 公式调用放置的图片。
例如:=webimage("http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/表单JS实例/2.gif")。
这样就给报表块添加了 gif 动图。
2)设置单元格左右缩进为 0,如下图所示:
3)然后叠加在需要边框的组件(这里指模块 1 和模块 2)周边即可,这样就可以显示动态边框了。
4.3 模板预览
保存预览,效果如下图所示:
5. 预览效果编辑
5.1 决策报表设置动态背景
5.2 普通报表设置动态背景
5.3 设置动态边框
注:以上三者不支持移动端。
6. 已完成模板编辑
6.1 决策报表设置动态背景
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例一.frm
点击下载模板:17-JS设置动态背景或边框-示例一.frm
点击下载 1.gif:1.gif
6.2 普通报表设置动态背景
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例二.cpt
点击下载模板:17-JS设置动态背景或边框-示例二.cpt
点击下载 1.gif:1.gif
6.3 设置动态边框
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\17-JS设置动态背景或边框-示例三.frm
点击下载模板:17-JS设置动态背景或边框-示例三.frm
点击下载 2.gif:2.gif