文档章节

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

朕想上头条
 朕想上头条
发布于 2015/12/03 09:36
字数 696
阅读 25
收藏 0
点赞 0
评论 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
南京
finereport普通报表的移动端自适应方案

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

九月你好123
2015/07/30
0
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
自适应网站设计对百度友好的关键

自适应网站设计对百度友好的关键:添加applicable-device标签 现在很多网站都使用了自适应网页设计(Response-Web-Design),以满足庞大的移动端用户群的需要。但是在技术上设计了自适应的网...

English0523
2016/05/06
0
0
数据可视化案例 | 如何打造数据中心APP产品

意识到数据探索带来的无尽信息,越来越多的企业开始建立自有的数据分析平台,打造数据化产品,实现数据可视化。 在零售商超行业,沃尔玛“啤酒与尿布”的故事已不再是传奇。无论是大数据还是...

九月你好123
2016/11/07
8
0
正确选择报表工具的十大标准

现在越来越多的项目要用报表工具,但国内市场上报表工具很多,鱼龙混杂,面对如此多的产品,很难只从一个方面就分出高低优劣,必须多方面比较。 标准一:厂家的发展前景 如果厂家运营不善不赚...

熊babi
2016/03/17
28
0
FineReport如何手动推送APP消息

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

雄霸天下啦
06/26
0
0
手机端适配(二)

自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序,运行在高端的移动终端设备。 我相信各位童鞋应该和我一个样子,...

前端小虾
2016/10/10
11
0
移动端报表JS开发示例--获取定位

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

九月你好123
2016/05/05
171
0
移动端开发基础 干货分享

移动端开发 我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站 app:application应用程序。手机软件:主要指安装在智能手机上的软件,完善原始系...

WEB攻程狮
2017/12/06
0
0
Hybrid App技术批量制作APP应用与跨平台解决方案

前言 简单的聊一聊我开发了4年之久的Hybrid App(混合模式移动应用)平台开发,目前一直在持续开发与维护,支持无编程快速开发! 其本意也不是要吹捧前端有多么强大,只是用自己的实际项目阐述...

文艺小青年
2017/08/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

全新内存布局Android5 for one x

众所周知Android5.0默认ART模式,运行速度加倍,软件占用内存也加倍,我们one x这种元老机采用旧的内存布局,data空间2g ART模式下安装几个软件也就不够用了。最近逛国外的xda论坛,发现有大...

CrazyManDF
9分钟前
0
0
web3j转账

 web3 转账功能   为了完成以太坊交易,必须有几个先决条件   1、对方的以太坊地址   2、确定要转账的金额   3、自己地址的转账权限   4、大于转账金额的以太币,以太币转账其实就...

智能合约
9分钟前
0
0
10.28 rsync工具介绍 , rsync常用选项, rsync通过ssh同步

rsync远程同步 重点!重点!!重点!!! 例子 • rsync -av /etc/passwd /tmp/1.txt • rsync -av /tmp/1.txt 192.168.188.128:/tmp/2.txt rsync格式 • rsync [OPTION] … SRC DEST • rs......

Linux_老吴
23分钟前
0
0
iis php 环境搭建,非常详细的教程

准备篇 一、环境说明: 操作系统:Windows Server 2016 PHP版本:php 7.1.0 MySQL版本:MySQL 5.7.17.0 二、相关软件下载: 1、PHP下载地址: http://windows.php.net/downloads/releases/ph...

T_star
25分钟前
0
0
Day35 rsync通过服务同步

rsync通过服务同步 rsyncd.conf配置文件详解 port:指定在哪个端口启动rsyncd服务,默认是873端口。 log file:指定日志文件。 pid file:指定pid文件,这个文件的作用涉及服务的启动、停止等...

杉下
31分钟前
1
0
【最新最全】为 iOS 和 Android 的真机和模拟器编译 Luajit 库

编译 Luajit 库,的确是一个挑战。因为官网的教程,在当前版本的 Xcode 和 NDK 环境中,已经不适用了。以前只是编译了适用于真机的 Luajit 库。最近在尝试编译模拟器 Luajit 库,就顺便梳理了...

ios122
31分钟前
0
0
rsync至ssh同步

rsync: 文件同步工具,可实现“增量拷贝”;使用yum安装rsync包 常用选项:-a=-rtplgoD (-r同步目录,-t保持文件的时间属性,-p保持文件的权限属性,-l保持软连接,-g保持文件的属组,-o保持...

ZHENG-JY
36分钟前
0
0
TradingView 学习笔记

#前言 公司最后需要使用TradingView展示K线图走势。由于之前没接触过,拿到文档时一脸蒙逼。还好找到二篇文章+Demo代码,直接改改就行了。 #被批 由于上面的懵懂,有个问题困扰4个小时没解决...

hihubs
36分钟前
0
0
10.28 rsync工具介绍~10.31 rsync通过ssh同步

rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件。rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而...

洗香香
39分钟前
1
0
卷积为什么要旋转180度

参考《最容易理解的对卷积(convolution)的解释》 https://blog.csdn.net/bitcarmanlee/article/details/54729807 这篇博客详细讲解了“卷积”,提及了为什么要反转180度,我简述下。 1.卷积的...

datadev_sh
48分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部