HTML5 端訪問報表/工程

1.1 版本

1.2 應用場景

在數據決策系統中將行動端 首頁 或 目錄 設定完成後，使用者可以在行動端查看整個報表系統。

使用者可在微信或瀏覽器等 HTML5 端，預覽 FineReport 設計器中製作的單張範本。

使用者可在微信或瀏覽器等 HTML5 端，配置自己的伺服器，瀏覽整個報表工程。

1.3 功能簡介

透過在伺服器端安裝「HTML5 行動端展現插件」，

HTML5 端透過存取連結查看報表工程中範本、目錄、首頁效果。

HTML5 端可以透過掃碼查看單張報表的效果。

2.1 安裝插件

如需在 HTML5 端預覽報表工程，必須安裝 「HTML5 行動端展現插件」。

點選下載插件： HTML5行動端展現插件 

設計器插件安裝方法參照 設計器插件管理 

伺服器安裝插件方法參照 伺服器插件管理

2.2 環境準備

將 PC 裝置與行動裝置切換至同一網路環境下。有兩種方法：

1）手機給電腦開熱點

2）手機和電腦連結同一熱點

注 1：為防止電腦 IP 未切換到無線網路的 IP，請拔掉有線網。

注 2：若想在不同網路環境下依舊能存取工程需要進行代理伺服器配置，參考文檔：代理伺服器配置

2.3 配置帳號密碼

如需在行動端存取範本，需要擁有一個數據決策系統的帳號密碼，具體設定方式請參見：決策系統簡介

初始化成功後，本文以 FineReport 設計器內建使用者 Alice 為例，其帳號和密碼分別為：Alice，123456。

2.4 配置首頁目錄

管理者可在數據決策系統中配置「行動端首頁」和「行動端目錄」，不配置則不顯示該頁。配置方法請參見：首頁、目錄

管理者需給相應使用者分配目錄查看權限，不分配無法查看範本。權限分配請參見：目錄查看權限

使用者可透過指定連結查看範本、目錄、首頁在 HTML5 端的效果，對應連結如下表所示：

注：IP 和埠號應分別修改為：實際 IP 、實際埠號。

若使用者存取上述連結時希望關閉 HTML5 效果， 可在連結後增加後台參數force_web=true，範例如下所示：

注：參數只能在 URL 裏新增，不能寫在範本參數裏。

• http://IP:埠號/webroot/decision?force_web=true

• http://IP:埠號/webroot/decision/view/report?viewlet=xxx.cpt&force_web=true

HTML5 端存取範本前，請先確定已完成第 2 章的 PC 端配置。

4.1 範本預覽

1）在設計器中開啟範本： %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demotw\phone\basic\產品明細-phone.cpt

點選「行動端預覽」，如下圖所示：

2）點選行動端預覽後，PC 端瀏覽器顯示頁面如下圖所示：

注：FVS視覺化看板 暫無行動端預覽按鈕，V1.17.1 及之後版本支援在 URL 後直接新增 &op=mobile 呼叫下圖頁面。

4.2 HTML5 端掃碼

開啟微信/瀏覽器，掃描QRCODE，即可查看範本。如下圖所示：

注： Safari 瀏覽器沒有QRCODE掃描功能，可以使用 iPhone 相機掃描QRCODE，頂部的通知欄會彈出提示，點一下就可以用 Safari 開啟。

透過HTML5 方式存取報表時，和使用PC端存取報表時可以使用的JS以及插件有略微的差別，詳情請查看：

6.1 無法開啟網頁

問題描述：

行動端預覽時，掃描QRCODE後提示伺服器連結失敗或無法開啟網頁。如下圖所示：

6.1.1 未配置網路環境

原因分析：未配置行動裝置與與電腦處於同一網路環境下。

解決方法：詳情請參見本文 「2.2 節」。

6.1.2 識別 IP 錯誤

原因分析：由於電腦短期內連結了多個網路，QRCODE連結中 IP 位址對應的網路與行動裝置所連結的網路並不相同的。

解決方案：

1）CMD 命令提示視窗下輸入：ipconfig /all

 即可查看本機實際 IP 地址，如下圖所示：

2）將所查到的 IPv4 位址與報表所生成QRCODE下方連結中的 IP 位址比較，如下圖所示：

 3）若不一致，修改網頁連結中的localhost為正確的 IP，點選return 鍵即可重新生成QRCODE，使用行動裝置重新掃碼預覽即可。

6.1.3 防火牆阻攔

原因分析：若確認已經按照文檔流程操作且應用配置符合要求，該報錯可能是由 Windows 防火牆引起。

解決方案：使用者可直接關閉 Windows 防火牆，再進行行動端預覽操作即可。或按照下文設定 Windows 防火牆開啟未允許埠。

1）開啟Windows安全中心>防火牆和網路保護>進階設定，選擇入站規則>建立規則

2）設定規則類型為埠，協定為TCP，埠為特定本地埠8075。儲存即可，如下圖所示：

6.2 HTML5 填報預覽報錯

問題描述：使用者在 HTML5 端 填報預覽時會報錯：該頁面不對當前終端顯示，如需存取請聯絡管理者，如下圖所示：

原因分析：決策系統平台掛載「填報範本」時，如果展示終端只勾選平板和手機，不勾選PC，則在 HTML5 端預覽會出現該報錯。

解決方案：行動端 H5 填報預覽目前不支援 H5 解析，填報範本是 PC 解析的，鑑權走的 PC 端邏輯，所以終端展示必須勾選PC，如下圖所示：