FineReport中如何安裝移動端H5外掛程式

標籤：finereport   移動端   

1. HTML5報表外掛程式安裝及使用編輯

• 外掛程式安裝

外掛程式網址以及設計器外掛程式安裝方法和伺服器安裝外掛程式的方法可以官網上面搜尋，這裡就不做詳細介紹了。

 

• 移動端HTML5報表使用方法

安裝好外掛程式後，在瀏覽器中調用時，需要在報表路徑後面加上參數op=h5。但是PC端不完全支援H5效果。

移動端添加參數前後效果：

650) this.width=650;" src="http://img.blog.csdn.net/20170419135250106?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmF5dW4xMjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:0px none;" />

fs上掛報表的時候不用帶參數，會自動識別是不是在手機上訪問的。另外移動端的H5外掛程式，圖表是只支援顯示新圖表。

2. Html5報表製作及手機效果編輯

• 手機頁面大小

製作手機上的報表與PC端報表製作過程是一樣的，為了讓使用者製作出適合手機尺寸的報表，在模板>版面設定>紙張大小的地方，可以選擇手機紙張大小，如：

650) this.width=650;" src="http://img.blog.csdn.net/20170419135322328?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmF5dW4xMjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:0px none;margin-left:auto;margin-right:auto;" />

 

• 報表參數介面的顯示效果

html5報表在手機上顯示時，參數介面和PC端不一樣，而是一個新的頁面，頁面的控制項會自動布局，從上到下依次顯示，根據參數介面>移動端顯示列表中的順序來顯示：

 

效果如：

650) this.width=650;" src="http://img.blog.csdn.net/20170419135342531?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmF5dW4xMjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:0px none;margin-left:auto;margin-right:auto;" /> 

 

• H5報表自適應

h5模板自適應的時候，點擊模板>移動端屬性，設定【豎屏】-【橫向自適應】，效果會比較好看，如果有超出部分則分頁顯示，可以通過下方工具列的翻頁按鈕進行翻頁。

650) this.width=650;" src="http://img.blog.csdn.net/20170419135543907?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmF5dW4xMjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:0px none;margin-left:auto;margin-right:auto;" />

650) this.width=650;" src="http://img.blog.csdn.net/20170419135555688?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbmF5dW4xMjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" style="border:0px none;margin-left:auto;margin-right:auto;" />

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外掛程式