文档章节

报表移动端app如何实现页面自适应?

朕想上头条
 朕想上头条
发布于 2015/12/03 09:36
字数 696
阅读 31
收藏 0

1. 描述

 PC上制作好的报表,在手机端查看的时候,报表软件默认的自适应效果不尽人如意。例如,报表比较大,到手机上被缩的非常小,字都看不清等等。为此FineReport增加了选项可以手动控制报表在移动终端上的显示效果。本文将详细演示这一功能如何实现并进行详细的操作演示。

2. 步骤

        2.1 安装自适应设置插件

启动设计器,打开服务器>插件管理>全部插件,选择报表自适应插件,然后安装:



 

注:若全部插件中没有显示插件,请更新jar包,或者安装最新的设计器

安装后,重启设计器,打开模板,点击菜单模板,里面会多出一个模板自适应属性,点击后,就可以手动控制app中报表竖屏及横屏时的自适应规则,如下图:



 

       2.2 自适应规则说明

竖屏及横屏自适应的规则可以分开控制,其中pad上的规则也采用横屏这个设置。

下拉框中我们可以看到有4个选项,分别为默认、横向自适应、纵向自适应、不自适应;

默认为FineReport内置的规则,简单说就是优先横向充满,在此基础上如果报表被缩的很小,则适当放大;

横向自适应及纵向自适应,就是横向充满及纵向充满,如果大则缩小,如果小则放大;

不自适应顾名思义就是展示报表的原始大小.

 

3. 示例

例如,下面的报表在PC浏览器中显示如下:



 

表比较宽,这个时候用手机查看,默认效果如下图:



 

可以看到,默认效果会将报表缩的很小,以至于字都看不清了,这种情况下,可以对这张报表,设置竖屏自适应规则,如改成“纵向自适应”,如下图:



 

手机上刷新报表,就可以看到,报表纵向充满了,如下图:



 

注:该功能在ios8.1.4以及android8.1.5版本开始才支持。

 


© 著作权归作者所有

共有 人打赏支持
朕想上头条
粉丝 0
博文 39
码字总数 35647
作品 0
南京
私信 提问
关于报表在移动端展现需你需要知道哪些?

现在,企业或者电商平台的商家、业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。而且,这些查看分析数据的诉求,对于随时随地、方便快捷的要求也越...

拾光石艺
10/19
0
0
finereport普通报表的移动端自适应方案

移动端报表呈现,首先要求的是页面随手机屏幕大小自动放缩(自适应),下面给出一个普通报表中的finereport移动端自适应方案,适用于finereport 7.1之前的版本。 首先,了解一下当前我们可以...

九月你好123
2015/07/30
0
0
FineReport如何手动推送APP消息

在报表填报成功后,发送消息至APP会提示数据已更新。再次期间用户需要有查看该模板的权限,如果没有的话,则无法接受到提示信息。那么在FineReport移动端中,如何手动推送APP消息呢? 具体用...

雄霸天下啦
06/26
0
0
移动端报表JS开发示例--获取定位

上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例。之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功...

九月你好123
2016/05/05
171
0
前端屏幕适配的总结

1.web app变革之rem(http://isux.tencent.com/web-app-rem.html) 2.移动前端自适应解决方案和比较(http://caibaojian.com/mobile-responsive-example.html) 3.前端开发终端适配方案(http://w......

IT追寻者
2016/08/03
195
0

没有更多内容

加载失败,请刷新页面

加载更多

FinderWeb2.4.9 程序员的看日志利器

FinderWeb2.4.9 程序员的看日志利器 使用方法:管理员登录,分配对应用户的的主机和文件权限即可。 部署方式: 下载并解压到webapps目录即可 http://www.finderweb.net/download/finder-web...

吴伟祥
7分钟前
0
0
PHP的pcntl进程控制教程一(pcntl_fork)

pcntl 简介 PHP的进程控制支持实现了Unix方式的进程创建, 程序执行, 信号处理以及进程的中断。 进程控制不能被应用在Web服务器环境,当其被用于Web服务环境时可能会带来意外的结果。 这份文档...

hansonwong
12分钟前
0
0
php扩展模块安装

11月21日任务 11.32 php扩展模块装安装 /usr/local/php/bin/php -m //查看模块 下面安装一个redis的模块 cd /usr/local/src/ wget https://codeload.github.com/phpredis/phpredis/zip/deve......

zgxlinux
13分钟前
1
0
windows下使用IDEA创建VUE项目

1.环境搭建 1.1检测是否安装好nodejs和npm 检测命令 node -v npm -v 如果没有安装需要先安装 nodejs的下载路径:https://nodejs.org/en/download/ 在Windows上安装时务必选择全部组件,包括勾...

文文1
20分钟前
1
0
Mybatis插件plugin应用测试,替换查询sql

1、新建插件 import org.apache.ibatis.executor.CachingExecutor;import org.apache.ibatis.executor.Executor;import org.apache.ibatis.executor.parameter.ParameterHandler;im......

jcc_codingBoy
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部