反馈已提交

网络繁忙

模板预览错位排查思路

  • 文档创建者:Catqiu
  • 编辑次数:3次
  • 最近更新:知识库 于 2022-09-09
  • 1. 概述

    报表预览时可能会出现表格或者图表错位的现象,本文针对该现象给出了部分原因和排查思路。排查思路如下:

    1)报表表格出现错位的异常现象,首先可以简单排查一下是否是浏览器的问题,火狐浏览器需要关注冻结设置的影响、IE浏览器需要关注兼容问题。尝试更换不同浏览器预览报表,如果错位情况仍存在的话,则需要进一步排查模板本身设置的问题,重点关注隐藏行列以及合并单元格。如果偶发数据错位可以尝试排查是否是填报暂存数据导致的异常。

    2)图表出现数据错位的情况多发生在使用单元格数据源时,10.0 的工程需要检查一下是否已经安装图表单元格数据源插件并启用,11.0 的工程需要考虑取数逻辑的变化,出现错位时可以考虑安装图表数据源兼容插件,尝试将取数逻辑切换为旧版。

    2. 浏览器问题

    2.1 IE 浏览器问题

    2.1.1 Not found resource

    问题描述

    具体报错信息:com/fr/web/core/hack/PIE.htc 或者 Not found resource: /com/fr/fs/resources/fonts/iconfont.eot?

    原因分析

    这两个都是 IE 低版本下不支持某些样式或者 css 的写法导致的, 并不影响使用.可能会损失写透明阴影之类的特效.

    解决方案

    使用高版本的IE

    2.1.2 IE浏览器报表背景异常

    问题描述

    使用 IE 浏览器访问报表,会有灰色背景,如下图,其他 PC 机或者使用其他浏览器访问报表时正常:

    原因分析

    IE浏览器本身设置了浏览器背景导致报表背景色显示异常。

    解决方案

    IE 工具栏上的「工具>Internet选项>外观>颜色」,勾选使用 Windows 颜色即可,如下图:

    2.1.3 在 IE 兼容模式下滚动条显示不全

    问题描述

    列比较多的模板,如果在「模板 Web 属性」中设置了分页预览「居中显示」,分页预览的时候,在 IE 兼容模式下滚动条显示不全,如下图所示:

    解决方案

    不直接使用模板 Web 属性中的分页居中,通过添加 加载结束事件 来设置分页预览的居中显示。代码如下:

    $(".content-container").css("left","34px");

    2.1.4 IE11预览单元格错位

    问题描述

    使用IE11预览报表时表格错位,如下图所示:

    解决方案

    可以尝试修改成兼容模式。

    2.1.5 IE模板IE冻结错位

    问题描述

    设置冻结之后表格上下错位,去掉冻结之后显示正常,如下图

    解决方案

    在最前面加空白行设置白色边框即可。

    2.2 谷歌浏览器问题

    2.2.1 单元格边框粗细不一致

    问题描述:报表页面设置单元格的边框粗细一致,但是谷歌浏览器预览的时候,粗细偶发不同的行列粗细不一致,如下图所示:


    原因分析:谷歌浏览器渲染相邻单元格的边框,有时候会合并两个相邻单元格边框只展示一个,有时候不合并相邻两个单元格的边框,导致粗细不一致。

    解决思路

    1)更换浏览器。

    2)开启新计算引擎插件,详情请参考:开启新计算引擎

    3)使用 CSS 修改单元格属性。编写 CSS 文件,将编写后的文件放到 webroot 下,在 web 属性引用 CSS 文件即可,CSS 文件内容如下:

    element.style {
        background-color: rgb(192,192,192);
    }
    .bw {
        word-wrap: break-word;
    }

    .fh {
        overflow: hidden;
        padding: 0;
        vertical-align: middle;
        text-align: left;
        font-size: 9pt;
        font-family: SimSun;
    }
    .b1 {
        border: 0.5px solid #000;
    }
    .x-table {
        overflow: hidden;
        table-layout: fixed;
        border-collapse: inherit;
        *word-break: break-all;
        *overflow: visible;
    }
    user agent stylesheet
    table {
        text-indent: initial;
        border-spacing: 1px;
    }
    .sheet-container {
        cursor: default;
    }

    2.2.2 预览普通模板边框变粗

    问题描述

    Chrome 91浏览器下,报表表格变粗,调整浏览器缩放(100%)正常,(110%)异常。

    原因分析

    谷歌浏览器渲染问题

    解决方案

    修改浏览器缩放,或更新谷歌浏览器到最新版本,或使用决策报表的新自适应模板。

    2.3 火狐浏览器

    2.3.1 设置冻结后滚动条未生效

    问题描述

    因为不同的浏览器滚动条设置不一样,可以发现设置冻结后,火狐浏览器右侧的滚动条并没有像其他浏览器一样分成上下两部分,分别是冻结行部分和非冻结行部分。

    解决方案

    • 方案一:安装自定义滚动条插件,隐藏滚动条。

    • 方案二:使用新填报预览(op=write_plus)。

    • 方案三:首行增加空白行,即在第一行前插入空白行,还要为空白行设置边框,边框设置为白色就可以,否则还会出现约1px的错位,但是有些情况不能添加空白行,比如报表需要原样导出时。

    • 方案四:首行冻结后设置固定行高,即为第一行设置固定行高,经过测试,行高值应大于等于8.74。

    3. 模板设置问题

    3.1 隐藏列导致错位

    问题描述

    隐藏A列后,模板预览时最后一列有错位的现象,如下图所示:

    原因分析

    冻结了部分合并单元格,且将第一列隐藏导致的问题。

    解决方案

    将合并单元格全部冻结后隐藏第一列。

    3.2 合并单元格内容错位

    问题描述

    合并的单元格包含冻结列和非冻结列,合并的单元格内容出现了错位。如下图所示:

    原因分析

    并的单元格不可跨越冻结区域,否则单元格合并失效,例如合并 A1~E1 单元格,仅冻结 A~C 列,那么预览时,A1~C1 单元格合并,D1~E1 单元格合并。

    解决方案

    1)合并单元格行不要跨越冻结列和非冻结列

    2)使用填报预览

    3.3 填报暂存导致模板数据错位问题

    问题描述

    1)填报预览数据错位

    2)有的用户账号登录显示正常,有的用户有问题

    3)同一个模板另存一份以后数据展示正常

    解决方案

    1)检查下模板web属性中的填报页面设置,确认模板是否设置了自动暂存

    • 若出现上述问题现象且模板这里勾选了暂存,则可以大概率确认是暂存导致的模板异常;

    • 若没有勾选暂存,也不能立即排除,需要进行下一步操作

    2)确认是否存在暂存数据

    参照 填报暂存 第三节内容,查看暂存数据,并参考 填报暂存 第四节内容清空暂存数据,则可恢复正常

    注:若使用的是内置数据库,则参考帮助文档的配置查看即可,若配置了外界数据库,则需要连接外接数据库的配置。暂存数据表名: PUBLIC.FINE_WRITE_STASH   ,若能查到暂存数据,则说明大概率是暂存数据影响的,此时清空数据即可解决。

    4. 图表错位问题

    4.1 frm里饼图和报表块重叠,缩放后错位

    问题描述

    frm里饼图和报表块重叠,缩放后错位,如下图

    原因分析

    调出控件边框,发现控件的边框自适应是完美的根据比例进行缩放,但是背景图片、图表、单元格文字双向铺满的自适应逻辑不尽相同,导致必然性的错位。

    解决方案

    把图表背景和背景文字做成一张图片,放到图表背景中去

    4.2 图表导出时字体发生错位

    问题描述

    图表自带的直接导出单张PNG格式的图片,字体发生错位。导出图表时,图例、分类名包含中文+英文的字符串时,比如“一二三abc”,导出会发生上下错位。

    原因分析

    linux下缺少字体包

    解决方案

    安装字体包和语言包

    4.3 iframe嵌入决策报表地图标签文字内容错位

    问题描述

    报表模板嵌入iframe使用display指定不同组件显示时,地图标签位置计算不对。

    原因分析

    display:none 会导致图表组件宽高获取有问题

    解决方案

    指定宽高

    function show(id, ids = ["s1","s2","s3", "s4"]) {
          const tmp = ids.map(c => {
            if (id == c) {
              document.getElementById(c).style.width = "1920px";
                      document.getElementById(c).style.height = "1080px";
            } else {
                 document.getElementById(c).style.width = "0px";
                      document.getElementById(c).style.height = "0px";
            }
          })
        }



    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    在线QQ(将在2023.01.05关停):800049425

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    7*24h

    智 能客 服