2.?Html5報表制作及手機效果

2.1?手機頁面大小

制作手機上的報表與PC端報表制作過程是一樣的，為了讓用戶制作出適合手機尺寸的報表，在模板>>移動端屬性地方，勾選設置為手機模板畫布大小，如下圖：

注：若模板中有內容，在設置為手機端專屬模版時，會觸發另存為以“_mobile”為后綴的模板，詳情參考：設置手機端模板

2.2?報表參數界面的顯示效果

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

效果如下圖：

2.3 H5報表自適應

h5模板自適應的時候，點擊模板>移動端屬性，橫屏和豎屏默認都為橫向自適應，可以根據效果自主選擇自適應方式，如果有超出部分則分頁顯示，可以通過下方工具欄的翻頁按鈕進行翻頁。

3. Html5報表支持功能點列表

目前Html5報表支持如下功能：

1、Html5報表暫時支持普通分頁預覽，填報預覽、數據分析還不支持

2、報表參數界面與正文分離，提供良好的用戶體驗

3、報表正文在不同的設備上會進行自適應

4、報表工具欄上提供左右箭頭可以進行翻頁、點擊頁碼可以進行快速翻頁

5、支持所有(新特性)類型圖表的基本展現，可以在圖表上進行穿透鉆取，有數據點提示

6、報表正文單元格支持鉆取

7、支持基礎控件：文本、下拉框、單選按鈕組、復選框組、日期、按鈕

8、支持決策報表模板的展現，并且可以有保留布局與自動重布局兩種選擇，可以快速制作精美的報表頁面

9、支持pc、phone、pad上顯示的目錄結構不同，用戶在pc上看到的報表目錄結構和手機上看到的目錄結構可以設置成不同

10、支持決策報表實現數據采集并提交入庫

11、參數界面優化，增加參數過濾快捷按鈕并支持直接返回目錄，及查詢前不顯示報表內容屬性

12、js緩存優化，提升展示性能

13、圖表性能優化

14、cpt報表縮放調整并支持是否啟用cpt報表的縮放

15、支持單元格元素的圖表展現，懸浮元素的圖表不支持展現

4.移動端手機報表制作時的屬性使用指南

隨著決策報表保留布局及自適應布局功能的發布，在設計手機報表的時候，會用到的屬性也增加了好幾個，雖然屬性的控制可以讓設計的時候更靈活，但是確無疑會增加設計的難度。我們也在想方設法的讓設計的時候更簡單，與此同時，也將相關的屬性以及用法在此做一個說明，讓大家的用的時候能夠更加清晰。

(1)決策報表body屬性中新增“手機重布局”屬性

手機重布局這個屬性只針對手機，pc和pad上面始終是原始布局。這個就是是否要在手機顯示的時候保留布局的開關，默認情況下是重布局的，即組件是依次往下顯示，一行只會有一個組件，如果想手機上顯示的時候就按照設計的布局來的話，記得勾選。

(2)決策報表中報表塊屬性中新增“手機顯示限制高度”屬性及高度的設置

這個通常使用默認的就可以了，有了這個屬性，你的報表塊設計的時候可以不需要去考慮最終的高度，在手機上面，報表塊的高度會根據報表最終擴展出來的內容高度自動變化。

當然這個屬性有一定的局限性，就是如果你設置保留設計時候的布局，報表塊旁邊又有其他控件比如右邊有個圖表，那報表塊高度就不會自動改變，設計時的比例是什么樣的就是什么樣的。

最后報表塊如果設置了限制高度的話，高度的設置為屏幕高度的比例值，我們這邊考慮到報表的滑動，所以報表塊限制高度時最大占屏幕高度的0.8，如果大家在實際使用時，覺得比例不合適也可以及時反饋給我們。

(3)決策報表body屬性中的“組件縮放”

決策報表body中自適應布局方式還有一個屬性“組件縮放”，大家也要關注一下，這個默認是“雙向自適應”，如果你的報表只在pc上看，設置為“雙向自適應”是非常合適的，但是如果是手機上看，就不太合適，所以如果是要兼顧手機端顯示的話，“組件縮放”屬性最好設置為“橫向自適應”會比較好。

設置為自適應布局并且“雙向自適應”的話，你的報表在手機上也會壓縮到一個手機屏幕，每個組件都會按照設計的比例擠壓顯示，這個時候報表塊的顯示高度限制也就沒啥用了。

總結

以上是生活随笔為你收集整理的html制作手机预览效果,新移动端Html5方式预览报表插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。