FineReport中如何安装移动端H5插件

简介:

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上看,设置为“双向自适应”是非常合适的,但是如果是手机上看,就不太合适,所以如果是要兼顾手机端显示的话,“组件缩放”属性最好设置为“横向自适应”会比较好。

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



本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1917397,如需转载请自行联系原作者

相关文章
|
22天前
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
1、【宝塔】删除ripro文件,上传最新ripro版本,然后上传压缩包内的ripro里面的对应文件到ripro主题对应内覆盖(找到对应路径单个文件去覆盖)。 2、然后上传ripro-chlid子主题美化包到/wp-content/themes路径下 3、注意顺序 原版–>美化包–>后台启用子主题(已启用请忽略)。
16 0
【ripro美化】全站美化包WordPress RiPro主题二开美化版sucaihu-childV1.9(功能集成到后台)
|
2月前
|
JSON 移动开发 数据可视化
用第三方拖拽库快速撸一个可视化搭建平台
用第三方拖拽库快速撸一个可视化搭建平台
29 3
|
4月前
|
XML 数据可视化 定位技术
OpenStreetMap网页界面介绍与OSM数据多种下载渠道及方式对比
OpenStreetMap网页界面介绍与OSM数据多种下载渠道及方式对比
|
5月前
|
小程序 JavaScript
微信小程序统计图表插件wxcharts的使用汇总
微信小程序统计图表插件wxcharts的使用汇总
40 0
|
9月前
|
数据采集 数据可视化 前端开发
漏刻有时数据可视化大屏核心完整版框架PHP后台数据管理 API数据接口 Echarts图表库 自带电脑端和手机端两套模版且支持自定义前端模版开发
漏刻有时数据可视化大屏核心完整版框架PHP后台数据管理 API数据接口 Echarts图表库 自带电脑端和手机端两套模版且支持自定义前端模版开发
157 0
|
11月前
|
移动开发 JSON API
h5调起原生分享面板,展示更多功能方案
h5调起原生分享面板,展示更多功能方案
185 0
|
11月前
|
Web App开发 Unix 开发者
推荐一款非常优雅且面向开发者的Chrome浏览器插件:在云端
【在云端】是由一群编程开发人员利用业余时间设计开发的一款Chrome浏览器新标签页美化插件,体现摄影美学、专注力以及先进云技术的插件。力求可以通过这项工作使得大家在这个快节奏的社会能够体会到一片安静与祥和,且不被这个时代淘汰。
10174 4
推荐一款非常优雅且面向开发者的Chrome浏览器插件:在云端
|
JavaScript Android开发
uniapp 项目双屏异显插件使用方式
uniapp 项目双屏异显插件使用方式
629 0
uniapp 项目双屏异显插件使用方式
|
小程序 程序员 定位技术
微信小程序开发:集成腾讯地图的步骤
在微信小程序开发的时候,会避免不了的使用腾讯送的大礼包,从微信支付到腾讯地图,一条龙的服务,不得不说鹅厂的实力,但是话又说回来了,鹅厂的官方API真是不敢恭维,尤其是微信小程序开发文档,如果不熟悉的话,真的是大坑不断,连环坑不断,无力吐槽。本篇博文来说说微信小程序开发的时候集成实现腾讯地图的功能,虽然微信官方API介绍了集成步骤,但是还是会给小白带来云里雾里的感觉,接下来就详细来说说具体的集成步骤,分享出来。
312 0
微信小程序开发:集成腾讯地图的步骤
|
存储 运维 小程序
基于微信小程序云开发(统计学生信息并导出excel)4.0版(稳定版)
基于微信小程序云开发(统计学生信息并导出excel)4.0版(稳定版)
261 0
基于微信小程序云开发(统计学生信息并导出excel)4.0版(稳定版)