[通用]行動端自適應

1. 概述

1.1 版本

報表伺服器版本App 版本
HTML5 行動端展現插件版本
11.0V11.0V11.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 為例,如下圖所示:

附件列表


主題: 行動端應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

8s后關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙

反饋已提交

網絡繁忙