1. HTML5报表插件安装及使用编辑

  • 插件安装

插件网址以及设计器插件安装方法和服务器安装插件的方法可以官网上面搜索,这里就不做详细介绍了。

  • 移动端HTML5报表使用方法

安装好插件后,在浏览器中调用时,需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。

移动端添加参数前后效果:

fs上挂报表的时候不用带参数,会自动识别是不是在手机上访问的。另外移动端的H5插件,图表是只支持显示新图表。

2. Html5报表制作及手机效果编辑

  • 手机页面大小

制作手机上的报表与PC端报表制作过程是一样的,为了让用户制作出适合手机尺寸的报表,在模板>页面设置>纸张大小的地方,可以选择手机纸张大小,如下图:

  • 报表参数界面的显示效果

html5报表在手机上显示时,参数界面和PC端不一样,而是一个新的页面,页面的控件会自动布局,从上到下依次显示,根据参数界面>移动端显示列表中的顺序来显示:

效果如下图:

  • H5报表自适应

h5模板自适应的时候,点击模板>移动端属性,设置【竖屏】-【横向自适应】,效果会比较好看,如果有超出部分则分页显示,可以通过下方工具栏的翻页按钮进行翻页。

3. Html5报表支持功能点列表编辑

注意:使用新版本要求服务器jar包时间为6月8日或更新,新特性图表插件版本为V7.2版本以上的
目前Html5报表支持如下功能:

1、Html5报表暂时支持普通分页预览,填报预览、数据分析还不支持
2、报表参数界面与正文分离,提供良好的用户体验
3、报表正文在不同的设备上会进行自适应
4、报表工具栏上提供左右箭头可以进行翻页、点击页码可以进行快速翻页
5、支持所有类型图表的基本展现,可以在图表上进行穿透钻取,有数据点提示
6、报表正文单元格支持钻取
7、支持基础控件:文本、下拉框、单选按钮组、复选框组、日期、按钮
8、支持表单模板的展现,并且可以有保留布局与自动重布局两种选择,可以快速制作精美的报表页面
9、支持pc、phone、pad上显示的目录结构不同,用户在pc上看到的报表目录结构和手机上看到的目录结构可以设置成不同
10、支持表单实现数据采集并提交入库
11、参数界面优化,增加参数过滤快捷按钮并支持直接返回目录,及查询前不显示报表内容属性
12、js缓存优化,提升展示性能
13、图表性能优化

14、cpt报表缩放调整并支持是否启用cpt报表的缩放

4、移动端手机报表制作时的属性使用指南编辑

随着表单保留布局及自适应布局功能的发布,在设计手机报表的时候,会用到的属性也增加了好几个,虽然属性的控制可以让设计的时候更灵活,但是确无疑会增加设计的难度。我们也在想方设法的让设计的时候更简单,与此同时,也将相关的属性以及用法在此做一个说明,让大家的用的时候能够更加清晰。

(1)表单body属性中新增“手机重布局”属性

手机重布局这个属性只针对手机,pc和pad上面始终是原始布局。这个就是是否要在手机显示的时候保留布局的开关,默认情况下是重布局的唷,即组件是依次往下显示,一行只会有一个组件唷,如果想手机上显示的时候就按照设计的布局来的话,记得勾选。

(2)表单中报表块属性中新增“手机显示限制高度”属性及高度的设置

这个通常使用默认的就可以了,有了这个属性,你的报表块设计的时候可以不需要去考虑最终的高度,在手机上面,报表块的高度会根据报表最终扩展出来的内容高度自动变化。
当然这个属性有一定的局限性,就是如果你设置保留设计时候的布局,报表块旁边又有其他控件比如右边有个图表,那报表块高度就不会自动改变,设计时的比例是什么样的就是什么样的。
最后报表块如果设置了限制高度的话,高度的设置为屏幕高度的比例值,我们这边考虑到报表的滑动,所以报表块限制高度时最大占屏幕高度的0.8,如果大家在实际使用时,觉得比例不合适也可以及时反馈给我们。

(3)表单body属性中的“组件缩放”

表单body中自适应布局方式还有一个属性“组件缩放”,大家也要关注一下,这个默认是“双向自适应”,如果你的报表只在pc上看,设置为“双向自适应”是非常合适的,但是如果是手机上看,就不太合适,所以如果是要兼顾手机端显示的话,“组件缩放”属性最好设置为“横向自适应”会比较好。

设置为自适应布局并且“双向自适应”的话,你的报表在手机上也会压缩到一个手机屏幕,每个组件都会按照设计的比例挤压显示,这个时候报表块的显示高度限制也就没啥用了。

FineReport中如何安装移动端H5插件的更多相关文章

  1. win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件

    win10下通过编译源码方式在chrome中成功安装react-devtools开发工具插件   1.去git上下载react-devtools文件到本地,https://github.com/fac ...

  2. Eclipse中如何安装和使用GrepCode插件

    GrepCode(GC)Eclipse插件允许Eclipse用户在Eclipse IDE中搜索由GrepCode提供的工厂类.本教程介绍如何安装和使用插件.使用Eclipse3.5(Galileo)的 ...

  3. Eclipse中如何安装和使用GrepCode插件 (转)

    GrepCode(GC)Eclipse插件允许Eclipse用户在Eclipse IDE中搜索由GrepCode提供的工厂类.本教程介绍如何安装和使用插件.使用Eclipse3.5(Galileo)的 ...

  4. [Eclipse插件] Eclipse中如何安装和使用GrepCode插件

    Java是开源的世界,如何快速的搜索到你需要的Java源码呢?2009年7月17日,GrepCode团队发布了一个有趣的 Java源码搜索引擎-GrepCode .与现有的各种搜索引擎相比,Java源 ...

  5. js检测浏览器中是否安装了flash播放插件

    这两天工作中需要在网页中嵌入flash小游戏,我使用的是swfobject.js version:1.5.其他方面都很好,唯独版本检测这里一直没有搞通,后来实在无奈之下,改用js来检测浏览器的flas ...

  6. JS 检测浏览器中是否安装了特定的插件

    1.检测非IE浏览器 可以使用plugins数组来达到这个目的,例: //检测插件(在IE中无效) function hasPlugin(name){ name = name.toLowerCase( ...

  7. 【转】在Eclipse中安装和使用TFS插件

    文章地址:http://www.cnblogs.com/judastree/archive/2012/09/05/2672640.html 问题: 在Eclipse中安装和使用TFS插件. 解决过程: ...

  8. MyEclipse 10 中安装Android ADT 22插件的方法

    MyEclipse 10 中安装Android ADT 22插件的方法 下载ADT包:http://dl.google.com/android/ADT-22.0.0.zip 将ADT-22.0.0.z ...

  9. ExtJs工具篇(1)——在Aptana3中安装ExtJS 代码提示插件

    首先得下载Aptana 这个软件,我下载的是Aptana3这个版本.下载后,在"帮助"菜单中选择"安装新软件",弹出下面的对话框: 我们需要安装一个叫做&quo ...

随机推荐

  1. MySQL笔记(4)---表

    1.前言 上一章记录了MySQL中的一些文件组成,以及相关作用和参数配置,本章开始记录深层次的存储结构,以便更好理解MySQL的设计. 2.索引组织表 InnoDB中,表都是根据主键顺序组织存放的,这 ...

  2. java多线程并发控制countDownLatch和cyclicBarrier的使用

    java主线程等待所有子线程执行完毕在执行,这个需求其实我们在工作中经常会用到,比如用户下单一个产品,后台会做一系列的处理,为了提高效率,每个处理都可以用一个线程来执行,所有处理完成了之后才会返回给用 ...

  3. js获取客户端ip地址

    <script type="text/javascript" src="http://www.coding123.net/getip.ashx?js=1" ...

  4. 215. 数组中的第K个最大元素

    在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2输出: 5示 ...

  5. 如何精准实现OCR文字识别?

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由云计算基础发表于云+社区专栏 前言 2018年3月27日腾讯云云+社区联合腾讯云智能图像团队共同在客户群举办了腾讯云OCR文字识别-- ...

  6. CentOS6.5 QT5.3 找不到GLIBCXX3.4.15解决方法

    下载安装后 启动的时候提示 GLIBCXX_3.4.15,发现libstdc++.so.6的版本过, 在安装qt-creator的时候运行这个IDE就出现了这个问题,是由于libstdc++.so.6 ...

  7. linq中last或者lastordefault不存在的问题

    在使用linq访问数据库的时候发现first以及firstordefault都存在,但是last以及lastordefault不存在.上网找寻一番发现是last只在linq to object中实现了 ...

  8. Deep learning with Python 学习笔记(4)

    本节讲卷积神经网络的可视化 三种方法 可视化卷积神经网络的中间输出(中间激活) 有助于理解卷积神经网络连续的层如何对输入进行变换,也有助于初步了解卷积神经网络每个过滤器的含义 可视化卷积神经网络的过滤 ...

  9. JavaScript 内存泄露以及如何处理

    一.前言 一直有打算总结一下JS内存泄露的方面的知识的想法,但是总是懒得提笔. 富兰克林曾经说过:懒惰,像生鏽一样,比操劳更能消耗身体,经常用的钥匙总是亮闪闪的.安利一下,先起个头. 二.内存声明周期 ...

  10. [转]csv文件导入Mysql

    本文转自:https://blog.csdn.net/quiet_girl/article/details/71436108 本篇博客主要讲将csv文件导入Mysql的方法(使用命令行). Step1 ...