PC 端预览模板的移动端效果

1.1 版本

1.2 功能简介

注：建议使用谷歌浏览器。

本文介绍如何利用浏览器的设备仿真工具，在 PC 端模拟单张模板的 移动端预览 效果，以谷歌浏览器的移动设备仿真工具为例。

本文方案具有以下优点：

• 无需移动端设备。

• 无需配置网络环境，并可以避免因为防火墙拦截而导致的网络连接失败。

示例模板路径为：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\form\简单自由填报-phone.cpt

2.1 复制模板预览链接

1）在 FineReport 设计器中，打开任意一张普通报表或决策报表，以简单自由填报-phone.cpt为例，选择「移动端预览」，如下图所示：

2）点击「移动端预览」后，PC 端浏览器显示页面如下，选择类型为「填报」，点击「复制链接」按钮。

注：决策报表不支持填报预览。

3）在浏览器中打开一个新页面，并将步骤 2 中获取到的链接粘贴至地址栏中，无需访问，如下图所示：

注：FVS 可视化看板移动端预览可直接查看效果，详情可见 移动端预览 。

2.2 切换设备

按 F12 键，或者单击鼠标右键点击检查，打开 Chrome 的控制台。点击「仿真设备」按钮，切换到移动端选项，如下图所示：

2.3 效果预览

访问当前网址，即可查看移动端报表效果，如下图所示：

注：PC端预览移动端模板效果时，不支持扫码输入。