1.1 版本

1.2 应用场景

PC 端制作的报表在手机端查看时，FineReport 默认提供的自适应效果不尽人意。

例如，报表比较大，在手机上被缩的非常小，字体模糊等。

此时可通过移动端属性里的「自适应」选项，手动控制报表在移动端上的显示效果。

1.3 注意事项

1）移动端自适应属性设置完成后，只在 HTML5 端和 App 端生效。

2）配置移动端自适应后若模板推送显示 PC 端效果，建议将 PC 端自适应属性设置为「默认」或「不自适应」。

2.1 功能入口

在普通报表中，点击菜单栏「模板>移动端属性」，可以看到设置自适应的界面， 横屏和竖屏可分开设置，如下图所示：

2.2 自适应

横屏 和 竖屏 的自适应设置都分为：「横向自适应」、「纵向自适应」、「双向自适应」、「不自适应」四种。

以 竖屏 为例，具体预览效果如下表所示：

注1：以下表格的效果图来源于 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\图像化显示进度条.cpt 模板。

注2：有些手机型号会出现「横向自适应」不生效的问题，此时用户可将模板中的单元格高度拉高，这样可确保横向自适应之后纵向高度能完整显示文本内容。

自适应属性	说明	预览效果
横向自适应	报表按比例缩放，横向充满屏幕
纵向自适应	纵向充满，如果大则缩小，如果小则放大， 横向可滑动查看
双向自适应	所有单元格的宽度和高度，同步拉伸或缩小，充满整个屏幕
不自适应	展示报表的原始大小

决策报表支持对 报表块 和 图表 单独设置移动端自适应属性，也支持对 模板整体 设置 移动端自适应属性 。

以下以 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\决策报表入门.frm 为例。

3.1 报表块

3.1.1 功能入口

点击右侧「组件设置>report0」，选择「移动端」，可看到「自适应」设置面板，如下图所示：

3.1.2 自适应

1）横屏、竖屏 的四种自适应方式同普通报表。

允许全屏 详情参见：[通用]组件全屏开关控制 。

组件可选中 详情参见：[通用]组件选中激活 。

手机显示限制高度 详情参见：[通用]组件显示限制高度 。

2）展开收起 分为「无」和「自定义」，默认为「无」。

「自定义」的设置界面如下图所示：

具体设置项的说明如下表所示：

3）展开收起 选择「自定义」，具体设置如下图所示：

4）移动端效果预览，以 App 为例，如下图所示：

3.2 图表

3.2.1 功能入口

点击右侧「组件设置>chart0」，选择「移动端」，可看到「图表自适应」设置面板，如下图所示：

3.2.2 图表自适应

1）允许全屏 详情参见：[通用]组件全屏开关控制 。

组件可选中 详情参见：[通用]组件选中激活 。

2）放大逻辑 固定为「等比例自适应」。

3）缩小逻辑 分为「自动匹配」、「等面积自适应」、「等比例自适应」三种，默认选择「自动匹配」。

• 自动匹配：系统根据模板自动匹配缩小逻辑。

• 等面积自适应：保持面积相等，横向压缩，纵向放大，最大高度为屏幕显示区域的 80% 。

• 等比例自适应：保持宽高比例不变，等比例自适应。

4）展开收起 和 报表块 的 展开收起 一样分为「无」和「自定义」，默认为「无」。

「自定义」的设置界面与 报表块「移动端>自适应>展开收起>自定义」相比，少了「行号>显示按钮>第N行开始收起」，其余设置项相同，如下图所示：

5）缩小逻辑  选择「等面积自适应」，其余保持默认，具体设置如下图所示：

6）移动端效果预览，以 App 为例，如下图所示：

3.3 模板整体

3.3.1 功能入口

在决策报表中，点击菜单栏「模板>移动端属性」，勾选「设置为手机端模板」时，默认勾选「自适应属性自动匹配」。

3.3.2 效果预览

以 App 为例，如下图所示：