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

首先,了解一下当前我们可以做到的自适应效果:

当前,用FIneReport按某一尺寸做好的报表,如果在屏幕像素较大的手机上打开,我们可以做到自动放大,但是我们当前最多只能放大两倍。所以,在制作移动端报表时,尺寸要有所取舍了。

之前给一个客户做过移动端报表,实现了在iphone4、小米、华为P6、三星S4等手机上自适应的效果(这里说的自适应主要是宽度上的或者说是横向上的自适应),具体做法如下:

  1. 设置页面大小,将页面宽度设置成120,页边距设置成0。

  1. 报表设计界面有红色的页边距线,考虑到精度问题,可以是先把单元格宽度设置小一点。

注:在制作过程中还发现一个问题,移动端打开报表后,并非一定是横向自适应,当当前报表纵向高度小于横向宽度时,会变成纵向自适应。这里说的高度和宽度并非是指页面纸张的宽度和高度,而是指有数据的单元格所占区域的高度和宽度。

finereport普通报表的移动端自适应方案的更多相关文章

  1. 有了这套flexible.js 移动端自适应方案,你就能在移动端的来去自如, (*^__^*)

    flexible.js 移动端自适应方案 一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https ...

  2. flexible.js 移动端自适应方案

    一,flexible.js 的使用方式: github地址:https://github.com/amfe/lib-flexible 官方文档地址:https://github.com/amfe/ar ...

  3. pc端自适应方案

    一.常见处理方式 定宽 电商类.内容为主的网站几乎采用这种方式 1.网易考拉.京东(1190px) 2.知乎(1000px),果壳(1000px),网易新闻(1200px) 媒体查询+定宽 图片类.简 ...

  4. vue中移动端自适应方案

    安装 lib-flexible 1.npm i lib-flexible 2.在项目入口文件 main.js 里 引入 lib-flexible import ‘lib-flexible’ 3.添加m ...

  5. vue+vue-cli+淘宝lib-flexible做移动端自适应

    总结用vue+vue-cli+淘宝lib-flexible做移动端自适应方案: 1.安装淘宝lib-flexible npm install lib-flexible --save 2.在入口文价ma ...

  6. 原生js移动端字体自适应方案

    自从进入新公司之后,就一直采用800的方案,也就是判断屏幕尺寸,大于800px是一种html字体处理方案,另一种方案是小于800px的html字体处理方案, 代码如下: (function(doc, ...

  7. FineReport关于tomcat集群部署的方案

    多台服务器集群后,配置权限.数据连接.模板.定时调度等,只能每台服务器一个个配置,不会自动同步到所有服务器. 针对上述情况,在FineReport中提供新集群部署插件,将xml配置文件.finedb/ ...

  8. 【转载】rem自适应布局-移动端自适应必备

    原文链接:rem自适应布局-移动端自适应必备 版权所有,转载时请注明出处,违者必究. 由于移动端特殊性,本文讲的是如何使用rem实现自适应,或叫rem响应式布局,通过使用一个脚本就可以rem自适应,不 ...

  9. 如何通过 WebP 自适应方案减少图片资源大小

    前言 我们知道,理想的网页应该在 1 秒内打开,而在页面的整体大小中,图片往往是所占比例最大的一部分(大约占到 60% 以上,更多了解请点击),也可以参照如下图所示.优化图片不仅可以加快页面显示,还能 ...

随机推荐

  1. 今天做项目用到框架,关于angual,然后自己整理了一番,自己上网也看了看。

    1. Angular 1.1. 库与框架的区别 jQuery:库 库一般都是封装了一些常用的方法 自己手动去调用这些方法,来完成我们的功能 $('#txt').val('我是小明'): $('div' ...

  2. jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析

    首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...

  3. AE常见接口之间的关系(较笼统)+arcgis常见概念

    常见的接口有如下关系 IworkspaceFactory-------------->IworkSpace------------------>IfeatureWorkSpace ---- ...

  4. Android Studio 小提示,新建Activity

    Android Studio是在google I/O大会上新发布的一个IDE,基于IntelliJ,Android开发除了Eclipse之外又多了一种选择. 在Android Studio中如何在当前 ...

  5. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

  6. IOS开发——02_第一个类的创建、声明…

    在OC中,一般用2个文件来描述一个类: 1..h:类的声明文件,用于声明成员变量.方法.类的声明使用关键字@interface和@end. 注:.h中只是用做方法声明,并不进行实现.什么叫声明呢?简单 ...

  7. Android项目开发实战-2048游戏

    <2048>是一款比较流行的数字游戏,最早于2014年3月20日发行.原版2048首先在GitHub上发布,原作者是Gabriele Cirulli,后被移植到各个平台.这款游戏是基于&l ...

  8. TCP连接状态与2MSL等待时间

    1 连接状态图 2 建立连接:三次握手,不使用DNS和使用DNS 3 关闭连接-四次握手 连接双方任何一方调用close()后,连接的两个传输方向都关闭,不能再发送数据了.如果一方调用shutdown ...

  9. postgresql function 返回 select

    pq函数功能很强大,我打算把统计的功能都放在数据库端.优势让运算离数据更近一些,缺点无法服用代码.牺牲了django的灵魂性,项目必须依赖postgresql. 项目中,希望实现返回select内容 ...

  10. JavaScript SetInterval与setTimeout使用方法详解

    setTimeout和setInterval的语法相同.它们都有两个参数,一个是将要执行的代码字符串,还有一个是以毫秒为单位的时间间隔,当过了那个时间段之后就将执行那段代码.不过这两个函数还是有区别的 ...