FineReport中如何安裝移動(dòng)端H5插件

1. HTML5報(bào)表插件安裝及使用編輯

• 插件安裝

插件網(wǎng)址以及設(shè)計(jì)器插件安裝方法和服務(wù)器安裝插件的方法可以官網(wǎng)上面搜索，這里就不做詳細(xì)介紹了。

• 移動(dòng)端HTML5報(bào)表使用方法

安裝好插件后，在瀏覽器中調(diào)用時(shí)，需要在報(bào)表路徑后面加上參數(shù)op=h6。但是PC端不完全支持H5效果。

移動(dòng)端添加參數(shù)前后效果：

fs上掛報(bào)表的時(shí)候不用帶參數(shù)，會(huì)自動(dòng)識(shí)別是不是在手機(jī)上訪問(wèn)的。另外移動(dòng)端的H5插件，圖表是只支持顯示新圖表。

2. Html5報(bào)表制作及手機(jī)效果編輯

• 手機(jī)頁(yè)面大小

制作手機(jī)上的報(bào)表與PC端報(bào)表制作過(guò)程是一樣的，為了讓用戶制作出適合手機(jī)尺寸的報(bào)表，在模板>頁(yè)面設(shè)置>紙張大小的地方，可以選擇手機(jī)紙張大小，如下圖：

• 報(bào)表參數(shù)界面的顯示效果

html5報(bào)表在手機(jī)上顯示時(shí)，參數(shù)界面和PC端不一樣，而是一個(gè)新的頁(yè)面，頁(yè)面的控件會(huì)自動(dòng)布局，從上到下依次顯示，根據(jù)參數(shù)界面>移動(dòng)端顯示列表中的順序來(lái)顯示：

效果如下圖：

• H5報(bào)表自適應(yīng)

h6模板自適應(yīng)的時(shí)候，點(diǎn)擊模板>移動(dòng)端屬性，設(shè)置【豎屏】-【橫向自適應(yīng)】，效果會(huì)比較好看，如果有超出部分則分頁(yè)顯示，可以通過(guò)下方工具欄的翻頁(yè)按鈕進(jìn)行翻頁(yè)。

3. Html5報(bào)表支持功能點(diǎn)列表編輯

注意：使用新版本要求服務(wù)器jar包時(shí)間為6月8日或更新，新特性圖表插件版本為V7.2版本以上的
目前Html5報(bào)表支持如下功能：

1、Html5報(bào)表暫時(shí)支持普通分頁(yè)預(yù)覽，填報(bào)預(yù)覽、數(shù)據(jù)分析還不支持
2、報(bào)表參數(shù)界面與正文分離，提供良好的用戶體驗(yàn)
3、報(bào)表正文在不同的設(shè)備上會(huì)進(jìn)行自適應(yīng)
4、報(bào)表工具欄上提供左右箭頭可以進(jìn)行翻頁(yè)、點(diǎn)擊頁(yè)碼可以進(jìn)行快速翻頁(yè)
5、支持所有類(lèi)型圖表的基本展現(xiàn)，可以在圖表上進(jìn)行穿透鉆取，有數(shù)據(jù)點(diǎn)提示
6、報(bào)表正文單元格支持鉆取
7、支持基礎(chǔ)控件：文本、下拉框、單選按鈕組、復(fù)選框組、日期、按鈕
8、支持表單模板的展現(xiàn)，并且可以有保留布局與自動(dòng)重布局兩種選擇，可以快速制作精美的報(bào)表頁(yè)面
9、支持pc、phone、pad上顯示的目錄結(jié)構(gòu)不同，用戶在pc上看到的報(bào)表目錄結(jié)構(gòu)和手機(jī)上看到的目錄結(jié)構(gòu)可以設(shè)置成不同
10、支持表單實(shí)現(xiàn)數(shù)據(jù)采集并提交入庫(kù)
11、參數(shù)界面優(yōu)化，增加參數(shù)過(guò)濾快捷按鈕并支持直接返回目錄，及查詢前不顯示報(bào)表內(nèi)容屬性
12、js緩存優(yōu)化，提升展示性能
13、圖表性能優(yōu)化

14、cpt報(bào)表縮放調(diào)整并支持是否啟用cpt報(bào)表的縮放

4、移動(dòng)端手機(jī)報(bào)表制作時(shí)的屬性使用指南編輯

隨著表單保留布局及自適應(yīng)布局功能的發(fā)布，在設(shè)計(jì)手機(jī)報(bào)表的時(shí)候，會(huì)用到的屬性也增加了好幾個(gè)，雖然屬性的控制可以讓設(shè)計(jì)的時(shí)候更靈活，但是確無(wú)疑會(huì)增加設(shè)計(jì)的難度。我們也在想方設(shè)法的讓設(shè)計(jì)的時(shí)候更簡(jiǎn)單，與此同時(shí)，也將相關(guān)的屬性以及用法在此做一個(gè)說(shuō)明，讓大家的用的時(shí)候能夠更加清晰。

（1）表單body屬性中新增“手機(jī)重布局”屬性

  手機(jī)重布局這個(gè)屬性只針對(duì)手機(jī)，pc和pad上面始終是原始布局。這個(gè)就是是否要在手機(jī)顯示的時(shí)候保留布局的開(kāi)關(guān)，默認(rèn)情況下是重布局的唷，即組件是依次往下顯示，一行只會(huì)有一個(gè)組件唷，如果想手機(jī)上顯示的時(shí)候就按照設(shè)計(jì)的布局來(lái)的話，記得勾選。

（2）表單中報(bào)表塊屬性中新增“手機(jī)顯示限制高度”屬性及高度的設(shè)置

  這個(gè)通常使用默認(rèn)的就可以了，有了這個(gè)屬性，你的報(bào)表塊設(shè)計(jì)的時(shí)候可以不需要去考慮最終的高度，在手機(jī)上面，報(bào)表塊的高度會(huì)根據(jù)報(bào)表最終擴(kuò)展出來(lái)的內(nèi)容高度自動(dòng)變化。
當(dāng)然這個(gè)屬性有一定的局限性，就是如果你設(shè)置保留設(shè)計(jì)時(shí)候的布局，報(bào)表塊旁邊又有其他控件比如右邊有個(gè)圖表，那報(bào)表塊高度就不會(huì)自動(dòng)改變，設(shè)計(jì)時(shí)的比例是什么樣的就是什么樣的。
最后報(bào)表塊如果設(shè)置了限制高度的話，高度的設(shè)置為屏幕高度的比例值，我們這邊考慮到報(bào)表的滑動(dòng)，所以報(bào)表塊限制高度時(shí)最大占屏幕高度的0.8，如果大家在實(shí)際使用時(shí)，覺(jué)得比例不合適也可以及時(shí)反饋給我們。

（3）表單body屬性中的“組件縮放”

  表單body中自適應(yīng)布局方式還有一個(gè)屬性“組件縮放”，大家也要關(guān)注一下，這個(gè)默認(rèn)是“雙向自適應(yīng)”，如果你的報(bào)表只在pc上看，設(shè)置為“雙向自適應(yīng)”是非常合適的，但是如果是手機(jī)上看，就不太合適，所以如果是要兼顧手機(jī)端顯示的話，“組件縮放”屬性最好設(shè)置為“橫向自適應(yīng)”會(huì)比較好。

設(shè)置為自適應(yīng)布局并且“雙向自適應(yīng)”的話，你的報(bào)表在手機(jī)上也會(huì)壓縮到一個(gè)手機(jī)屏幕，每個(gè)組件都會(huì)按照設(shè)計(jì)的比例擠壓顯示，這個(gè)時(shí)候報(bào)表塊的顯示高度限制也就沒(méi)啥用了。