1. HTML5報表插件安裝及使用編輯html
插件安裝html5
插件網址以及設計器插件安裝方法和服務器安裝插件的方法能夠官網上面搜索,這裏就不作詳細介紹了。瀏覽器
移動端HTML5報表使用方法緩存
安裝好插件後,在瀏覽器中調用時,須要在報表路徑後面加上參數op=h5。可是PC端不徹底支持H5效果。性能優化
移動端添加參數先後效果:服務器
fs上掛報表的時候不用帶參數,會自動識別是否是在手機上訪問的。另外移動端的H5插件,圖表是隻支持顯示新圖表。ide
2. Html5報表製做及手機效果編輯工具
手機頁面大小佈局
製做手機上的報表與PC端報表製做過程是同樣的,爲了讓用戶製做出適合手機尺寸的報表,在模板>頁面設置>紙張大小的地方,能夠選擇手機紙張大小,以下圖:性能
報表參數界面的顯示效果
html5報表在手機上顯示時,參數界面和PC端不同,而是一個新的頁面,頁面的控件會自動佈局,從上到下依次顯示,根據參數界面>移動端顯示列表中的順序來顯示:
效果以下圖:
H5報表自適應
h5模板自適應的時候,點擊模板>移動端屬性,設置【豎屏】-【橫向自適應】,效果會比較好看,若是有超出部分則分頁顯示,能夠經過下方工具欄的翻頁按鈕進行翻頁。
3. Html5報表支持功能點列表編輯
注意:使用新版本要求服務器jar包時間爲6月8日或更新,新特性圖表插件版本爲V7.2版本以上的
目前Html5報表支持以下功能:
一、Html5報表暫時支持普通分頁預覽,填報預覽、數據分析還不支持
二、報表參數界面與正文分離,提供良好的用戶體驗
三、報表正文在不一樣的設備上會進行自適應
四、報表工具欄上提供左右箭頭能夠進行翻頁、點擊頁碼能夠進行快速翻頁
五、支持全部類型圖表的基本展示,能夠在圖表上進行穿透鑽取,有數據點提示
六、報表正文單元格支持鑽取
七、支持基礎控件:文本、下拉框、單選按鈕組、複選框組、日期、按鈕
八、支持表單模板的展示,而且能夠有保留佈局與自動重佈局兩種選擇,能夠快速製做精美的報表頁面
九、支持pc、phone、pad上顯示的目錄結構不一樣,用戶在pc上看到的報表目錄結構和手機上看到的目錄結構能夠設置成不一樣
十、支持表單實現數據採集並提交入庫
十一、參數界面優化,增長參數過濾快捷按鈕並支持直接返回目錄,及查詢前不顯示報表內容屬性
十二、js緩存優化,提高展現性能
1三、圖表性能優化1四、cpt報表縮放調整並支持是否啓用cpt報表的縮放
四、移動端手機報表製做時的屬性使用指南編輯
隨着表單保留佈局及自適應佈局功能的發佈,在設計手機報表的時候,會用到的屬性也增長了好幾個,雖然屬性的控制可讓設計的時候更靈活,可是確無疑會增長設計的難度。咱們也在千方百計的讓設計的時候更簡單,與此同時,也將相關的屬性以及用法在此作一個說明,讓你們的用的時候可以更加清晰。
(1)表單body屬性中新增「手機重佈局」屬性
手機重佈局這個屬性只針對手機,pc和pad上面始終是原始佈局。這個就是是否要在手機顯示的時候保留佈局的開關,默認狀況下是重佈局的唷,即組件是依次往下顯示,一行只會有一個組件唷,若是想手機上顯示的時候就按照設計的佈局來的話,記得勾選。
(2)表單中報表塊屬性中新增「手機顯示限制高度」屬性及高度的設置
這個一般使用默認的就能夠了,有了這個屬性,你的報表塊設計的時候能夠不須要去考慮最終的高度,在手機上面,報表塊的高度會根據報表最終擴展出來的內容高度自動變化。
固然這個屬性有必定的侷限性,就是若是你設置保留設計時候的佈局,報表塊旁邊又有其餘控件好比右邊有個圖表,那報表塊高度就不會自動改變,設計時的比例是什麼樣的就是什麼樣的。
最後報表塊若是設置了限制高度的話,高度的設置爲屏幕高度的比例值,咱們這邊考慮到報表的滑動,因此報表塊限制高度時最大佔屏幕高度的0.8,若是你們在實際使用時,以爲比例不合適也能夠及時反饋給咱們。
(3)表單body屬性中的「組件縮放」
表單body中自適應佈局方式還有一個屬性「組件縮放」,你們也要關注一下,這個默認是「雙向自適應」,若是你的報表只在pc上看,設置爲「雙向自適應」是很是合適的,可是若是是手機上看,就不太合適,因此若是是要兼顧手機端顯示的話,「組件縮放」屬性最好設置爲「橫向自適應」會比較好。
設置爲自適應佈局而且「雙向自適應」的話,你的報表在手機上也會壓縮到一個手機屏幕,每一個組件都會按照設計的比例擠壓顯示,這個時候報表塊的顯示高度限制也就沒啥用了。