PC端預覽範本的行動端效果

1.1 版本

1.2 功能簡介

注：建議使用谷歌瀏覽器。

本文介紹如何利用瀏覽器的裝置仿真工具，在 PC 端模擬單張範本的 行動端預覽 效果，以谷歌瀏覽器的行動裝置仿真工具為例。

本文方案具有以下優點：

• 無需行動端裝置。

• 無需配置網路環境，並可以避免因為防火牆攔截而導致的網路連結失敗。

範例範本路徑為：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demotw\form\簡單自由填報-phone.cpt

2.1 複製範本預覽連結

1）在 FineReport 設計器中，開啟任意一張普通報表或決策報表，以簡單自由填報-phone.cpt為例，選擇「行動端預覽」，如下圖所示：

2）點選「行動端預覽」後，PC 端瀏覽器顯示頁面如下，選擇類型為「填報」，點選「複製連結」按鈕。

注：決策報表不支援填報預覽。

3）在瀏覽器中開啟一個新頁面，並將步驟 2 中獲取到的連結貼上至地址欄中，無需存取，如下圖所示：

注：FVS 視覺化看板行動端預覽可直接查看效果，詳情可見 行動端預覽 。

2.2 切換裝置

按 F12 鍵，或者按滑鼠右鍵點選檢查，開啟 Chrome 的控制檯。點選「仿真裝置」按鈕，切換到行動端選項，如下圖所示：

2.3 效果預覽

存取當前地址，即可查看行動端報表效果，如下圖所示：

注：PC端預覽行動端範本效果時，不支援掃碼輸入。