1. 概述编辑
1.1 版本
报表服务器版本 | 功能变更 |
---|---|
11.0 | -- |
注:本文仅适用于 PC 端,移动端自适应方法请参见:[通用]移动端自适应
1.2 应用场景
PC 端,用户预览模板希望能够根据屏幕分辨率自适应。
1.3 功能简介
普通报表可设置字体(自适应、不自适应)、表格(横向自适应、双向自适应、不自适应)。
决策报表可设置字体(自适应、不自适应)、报表缩放方式(双向自适应、横向自适应、不自适应)。
2. 普通报表编辑
2.1 设置方式
点击「模板>PC 端自适应属性」,点击「PC 端报表块自适应属性」面板,可以选择「采用服务器设置」或「为该模板单独设置」,如下图所示:
2.1.1 采用服务器设置
默认选中「采用服务器设置」,设置对设计器下所有「采用服务器设置」的模板均生效。如下图所示:
2.1.2 为该模板单独设置
选择「为该模板单独设置」,则「字体」和「表格」自适应设置仅对当前模板生效。如下图所示:
2.2 自适应逻辑
自适应属性 | 效果 | 缩放逻辑 | 注意事项 |
---|---|---|---|
字体不自适应 | 字体大小原样输出 | - | - |
字体自适应 | 字体大小会根据浏览器的大小缩放 | 缩放比例 = 浏览器页面宽度 / 老的报表页面配置宽度 | 表格不自适应时,字体自适应不生效 |
表格不自适应 | 表格大小原样输出 | - | - |
表格横向自适应 | 模板横向充满浏览器窗口宽度 | 新页面宽度 = 浏览器宽度 新页面高度 = 浏览器页面宽度 / (老报表页面设置的宽度 / 老报表页面高度) | 横向单元格过多时, 单元格只能缩小到一定比例,横向强制分页 |
表格双向自适应 | 模板双向充满浏览器窗口大小 | 新页面宽度 = 浏览器宽度 新页面高度 = 浏览器高度 | 单元格过多时, 单元格只能缩小到一定比例,横向强制分页,纵向出现滚动条 |
注1:一定比例为 0.4,浏览器中报表的宽高 / 正文宽高 < 0.4
注2:参数界面不自适应
注3:当设置有「冻结行」时,行高被限制,双向自适应则不生效,等同于「横向自适应或不自适应」
3. 决策报表编辑
3.1 设置方式
点击「模板>PC 端自适应属性」,弹出「PC 端报表块自适应属性」面板,可以选择「采用服务器设置」或「为该模板单独设置」。使用方式与上文一致,请参考本文 2.1 章节。如下图所示:
3.2 自适应逻辑
决策报表中,PC端自适应属性相关设置的逻辑如下表所示:
设置项 | 选项 | 效果 | 说明 |
---|---|---|---|
字体 | 自适应 | 字体大小会随模板缩放的效果进行缩放 且字体自适应属性作用于模板中所有组件的文字 | |
不自适应 | 字体按照决策报表中设置的大小原样展示,不跟随模板缩放 | ||
报表缩放方式 | 双向自适应 | 模板中的所有组件同时在横向和纵向两个方向上充满浏览器窗口 且在不同屏幕分辨率下,内容都会呈现在一页中 | |
横向自适应 | 模板中的所有组件横向充满浏览器窗口,高度会等比例缩放 在不同屏幕分辨率下,单页显示不全时,纵向会出现滚动条 | ||
不自适应 | 模板按照设计时分辨率大小,原样展示在浏览器窗口 在不同屏幕分辨率下,单页显示不全时,横向或纵向会出现滚动条 |
注:详情请参见文档 决策报表自适应属性 。
4. 移动端自适应编辑
本文的「PC 端自适应属性/PC 端报表块自适应属性」对移动端不生效。
移动端自适应设置请参见:[通用] 移动端自适应
5. 注意事项编辑
5.1 模板设置横向自适应后,预览字体模糊
问题描述:
模板设置横向自适应后,预览字体模糊。
解决方案:
横向自适应会预留滚动条,因此右侧出现一点空白,导致字体显示稍微模糊,属于正常效果。
用户若希望字体清楚,可设置双向自适应。
5.2 设置双向自适应后依旧有滚动条
问题描述:
决策报表设置 PC 端双向自适应,body 双向自适应,报表块双向自适应后,改变浏览器页面大小,还是会出现滚动条。
原因分析:
属于系统 DPI 问题,分辨率为 1920*1080 ,缩放率为 125% 时,会出现横向滚动条,前台会隐藏该滚动条,但滚动条依然是存在的。
解决方案:
将缩放设置为 100% 。
若因报表块内容过多而导致滚动条产生,可以通过限制内容或隐藏滚动条的方法去除滚动条,请参见:隐藏滚动条 。
5.3 设置冻结后自适应下报表有空白
问题描述:
决策报表中,当报表块中设置了冻结,在自适应的情况下,出现报表内容没有撑满全屏幕,四周有空白的问题。
解决方案:
若浏览器缩放或全屏下,报表块下方出现空白问题,可以给 body 添加一个初始化事件,调整显示。事件代码内容如下:
$(window).resize(function () {
var width = FR.windowWidth; //获取浏览器窗口长度
var height = FR.windowHeight;//获取浏览器窗口高度
//调整报表form的长宽
var from = _g().getWidgetByName('form')
if (form.oriWidth === width && form.oriHeight === height) {
return;
}
form.oriWidth = width;
form.oriHeight = height;
//加载报表内容
form.loadContentPane(true);
}
);