HTML5端快速訪問單張範本

使用者需要查看 FineReport 製作的範本在行動端的效果時，可透過行動端（App、微信、瀏覽器等）預覽查看。FineReport 提供 HTML5 端、FineMoblie App 兩種行動端預覽方法。本文主要講述如何快速配置 HTML5 端預覽單張範本的方法。

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

如需在 HTML5 端預覽報表工程，必須安裝 「Html解析」插件。FineReport 設計器預設安裝「Html解析」插件，在設計器中點選「伺服器>插件管理」，在插件管理的彈窗右側「我的插件」中即可查看，如下圖所示：

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

1）手機給電腦開熱點

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

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

4.1 PC 端配置

1）開啟 FineReport 設計器，開啟任意一張普通報表或決策報表，以 產品明細.cpt 為例，選擇「行動端預覽」，如下圖所示：

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

注：FVS 視覺化看板行動端預覽詳情可見 行動端預覽 。

4.2 HTML5 端掃碼

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

也可以直接複製下方的連結，貼上到行動端瀏覽器端存取範本。

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

5.1 伺服器連結失敗

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

原因分析：

1）未配置網路環境

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

解決方法：詳情請參見本文第 3 節。

2）防火牆阻攔

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

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

開啟「Windows安全中心>防火牆和網路保護>進階設定」，選擇「入站規則>建立規則」，如下圖所示：

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

3）識別IP錯誤

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

解決方案：CMD 命令提示視窗下輸入：ipconfig /all，即可查看本機實際 IP 地址，將所查到的 IPv4 地址與報表所生成QRCODE下方連結中的 IP 地址比較，如下圖所示：

5.2 行動端連結IP丟失

點選行動端預覽後，下方生成的連結丟失了 IP，導致貼上到行動端瀏覽器後無法正常存取。

丟失 IP 的連結如：http://:8075/webroot/decision/view/form?viewlet=Form14.frm&op=h5

這種情況可能跟無線網卡有關，可以檢查下是否成功連結到了無線網卡。