HTML5 端訪問報表/工程

1

版本。

2

應用場景。

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

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

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

3

功能簡介。

1. 透過在伺服器端安裝【HTML5 行動端展現插件】，HTML5 端透過訪問連結查看報表工程中範本、目錄、首頁效果。

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

1

安裝插件。

1. 如需在 HTML5 端預覽報表工程，必須安裝 【HTML5 行動端展現插件】。

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

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

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

2

環境準備。

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

   ①手機給電腦開熱點。

   ②手機和電腦連結同一熱點。

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

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

3

配置帳號密碼。

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

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

4

配置首頁目錄。

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

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

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

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

1. 若使用者訪問上述連結時希望關閉 HTML5 效果， 可在連結後增加後臺參數【force_web=true】，範例如下所示。

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

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

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

1. HTML5 端訪問範本前，請先確定已完成第 2 章的 PC 端配置。

1

範本預覽。

1. 在設計器中開啟範本： 【%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demotw\phone\basic\列式填報表.cpt】點選【行動端預覽】，如下圖1所示。

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

2

HTML5 端掃碼。

1. 開啟微信/瀏覽器，掃瞄QRCODE，即可查看範本。

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

1. 透過HTML5 方式訪問報表時，和使用PC端訪問報表時可以使用的JS以及插件有略微的差別，詳情請查看。

1

無法開啟網頁。

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

2

未配置網路環境。

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

2. 解決方法：詳情請參見本文第二章第2節。

3

識别 IP 錯誤。

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

2. 解決方案：CMD 命令提示視窗下輸入：【ipconfig /all】 即可查看本機實際 IP 位址，如下圖1所示。

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

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

4

防火牆阻攔。

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

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

3. 開啟【Windows安全中心】→【防火牆和網路保護】→【進階設定】，選擇【入站規則】→【建立規則】。

4. 設定規則型別為埠，協定為TCP，埠為特定本地埠8075。儲存即可，如下圖所示。

5

HTML5 填報預覽報錯。

1. 問題描述：使用者在 HTML5 端 填報預覽時會報錯：【該頁面不對當前終端顯示，如需訪問請聯系管理者】，如下圖所示。

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

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