1. 概述
1.1 版本
報表伺服器版本 | App 版本 | HTML5 行動端展現插件版本 |
---|---|---|
11.0 | V11.0 | V11.0 |
1.2 應用場景
PC 端製作的報表在手機端查看時,FineReport 預設提供的自適應效果不盡人意。
例如,報表比較大,在手機上被縮的非常小,字體模糊等。
此時可透過行動端屬性裏的「自適應」選項,手動控制報表在行動端上的顯示效果。
1.3 注意事項
1)行動端自適應屬性設定完成後,只在 HTML5 端和 App 端生效。
2)配置行動端自適應後若範本推播顯示 PC 端效果,建議將 PC 端自適應屬性設定為「預設」或「不自適應」。
2. 普通報表
2.1 功能入口
在普通報表中,點選菜單欄「範本>行動端屬性」,可以看到設定自適介面, 橫屏和豎屏可分開設定,如下圖所示:
2.2 自適應
橫屏 和 豎屏 的自適應設定都分為:「橫向自適應」、「縱向自適應」、「雙向自適應」、「不自適應」四種。
以 豎屏 為例,具體預覽效果如下表所示:
注1:以下表格的效果圖來源於 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\影像化顯示進度條.cpt 範本。
注2:有些手機型號會出現「橫向自適應」不生效的問題,此時使用者可將範本中的儲存格高度拉高,這樣可確定橫向自適應之後縱向高度能完整顯示正文內容。
自適應屬性 | 說明 | 預覽效果 |
---|---|---|
橫向自適應 | 報表按比例尺,橫向充滿螢幕 | ![]() |
縱向自適應 | 縱向充滿,如果大則縮減,如果小則放大, 橫向可滑動查看 | ![]() |
雙向自適應 | 所有儲存格的寬度和高度,同步拉伸或縮減,充滿整個螢幕 | ![]() |
不自適應 | 展示報表的原始大小 | ![]() |
3. FVS 視覺化看板
3.1 畫布自適應
3.1.1 功能入口
詳情參見:FVS視覺化看板畫布自適應 ,如下圖所示:
3.1.2 畫布自適應
未開啟行動端佈局時,畫布自適五種自適應方式:「自動」、「高度鋪滿」、「寬度鋪滿」、「雙向鋪滿」、「無」,對整個範本所有分頁生效。
開啟行動端佈局時,畫布自適應設定不生效。組件大小會按照畫布尺寸重新計算,組件佈局繼承範本畫布中從左至右、從上到下的組件/組合順序,圖層重疊時按照從頂層至底層的順序進行展示。
為方便清晰展示,範例範本頁面設定為藍色,畫布大小為 375*600 ,餅圖組件背景設定為白色,鋪滿整個畫布。具體如下表所示:
佈局方式 | 自適應方式 | 說明 | 預覽效果 |
---|---|---|---|
保留佈局 | 自動 | 畫布等比例自適應後保持一屏展示 會存在某一個方向兩邊留白 | ![]() |
高度鋪滿 | 畫布縱向鋪滿螢幕,橫向等比例尺 若橫向小於螢幕寬度,則左右兩邊留白 若橫向大於螢幕寬度,超出部分可左右滑動查看 | ![]() | |
寬度鋪滿 | 畫布橫向鋪滿螢幕,縱向等比例尺 若縱向小於螢幕高度,則上下兩邊留白 若縱向大於螢幕高度,超出部分可上下滑動查看 | ![]() | |
雙向鋪滿 | 畫布橫向、縱向均鋪滿螢幕 | ![]() | |
無 | 畫布保持設計器中設定的大小 | ![]() | |
重佈局 | - | - | ![]() |
3.2 表格組件內容適應
3.2.1 功能入口
切換至行動端預覽介面,選中表格組件,即可在右側的內容適應方式中設定「高度鋪滿」、「寬度鋪滿」、「雙向鋪滿」、「無」四種內容適應方式,如下圖所示:
3.2.2 內容適應方式
1)未開啟行動端佈局時,表格組件內容按照設定的內容適應方式鋪滿表格組件顯示。
2)開啟行動端佈局時,表格組件內容始終保持高度鋪滿。
內容適應方式設定為「無」和「高度鋪滿」展示效果相同,均為內容高度鋪滿組件。若橫向內容小於組件寬度,則有留白;若大於組件寬度,則可左右滑動查看。
內容適應方式設定為「寬度鋪滿」和「雙向鋪滿」展示效果相同,均為內容雙向鋪滿組件。
4. 決策報表
決策報表支援對 範本整體 設定 行動端自適應屬性 ,也支援對 報表塊 和 圖表 單獨設定行動端自適應屬性。
以下以 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\決策報表入門.frm 為例。
4.1 範本整體
4.1.1 功能入口
在決策報表中,點選菜單欄「範本>行動端屬性」,勾選「設定為手機端範本」時,預設勾選「自適應屬性自動匹配」。
4.1.2 效果預覽
以 App 為例,如下圖所示:
4.2 報表塊
4.2.1 功能入口
點選右側「report0」,選擇「行動端」,可看到「自適應」設定面板,保留佈局和重佈局下的設定項不同,重佈局時多出的設定項用橙色方框標出,如下圖所示:
4.2.2 自適應
1)橫屏、豎屏 的四種自適應方式同普通報表。
允許全螢幕 詳情參見:[通用]組件全螢幕開關控制 。
組件可選中 詳情參見:[通用]組件選中激活 。
手機顯示限制高度 詳情參見:[通用]組件顯示限制高度 。
2)展開收起 是在重佈局時出現的設定項,分為「無」和「自訂」,預設為「無」。
「自訂」的設定介面如下圖所示:
具體設定項的說明如下表所示:
設定項 | 說明 | |
---|---|---|
行號 | 顯示按鈕 | 支援設定從第N行開始收起 |
展開收起按鈕 | 顯示按鈕 | 支援設定是否在標題右側顯示按鈕 |
按鈕顏色 | 支援設定按鈕顏色 | |
收起時文字提示 | 支援設定收起時文字提示內容 | |
展開時文字提示 | 支援設定展開時文字提示內容 | |
預設狀態 | 支援設定預設狀態:收起或展開 |
3)展開收起 選擇「自訂」,具體設定如下圖所示:
4)行動端效果預覽,以 App 為例,如下圖所示:
4.3 圖表
4.3.1 功能入口
點選右側「chart0」,選擇「行動端」,可看到「圖表自適應」設定面板,保留佈局和重佈局下下的設定項不同,重佈局時多出的設定項用橙色方框標出,如下圖所示:
4.3.2 圖表自適應
1)允許全螢幕 詳情參見:[通用]組件全螢幕開關控制 。
組件可選中 詳情參見:[通用]組件選中激活 。
2)放大邏輯 為重佈局時出現的設定項,固定為「等比例自適應」。
3)縮減邏輯 為重佈局時出現的設定項,分為「自動匹配」、「等面積自適應」、「等比例自適應」三種,預設選擇「自動匹配」。
自動匹配:系統根據範本自動匹配縮減邏輯。
等面積自適應:保持面積相等,橫向壓縮,縱向放大,最大高度為螢幕顯示區域的 80% 。
等比例自適應:保持寬高比例不變,等比例自適應。
4)展開收起 為重佈局時出現的設定項,和報表塊的 展開收起 一樣分為「無」和「自訂」,預設為「無」。
「自訂」的設定介面與 報表塊「行動端>自適應>展開收起>自訂」相比,少了「行號>顯示按鈕>第N行開始收起」,其餘設定項相同,如下圖所示:
5)縮減邏輯 選擇「等面積自適應」,其餘保持預設,具體設定如下圖所示:
6)行動端效果預覽,以 App 為例,如下圖所示: