JS设置动态背景/边框

  • Last update:August 29, 2022
  • 1. 概述

    1.1 预期效果

    制作大屏模板时,给报表或者报表中的某一部分添加动态背景或动态边框。如下图所示:

    1603089062537730.gif

    1.2 实现思路

    1)通过添加「初始化后」事件或「加载结束」事件,使用 JS 调用 GIF 格式的图片作为报表背景。

    2)在单元格中使用 WEBIMAGE 公式调用网页中的 GIF 图片,实现动态边框。

    2. 背景示例

    2.1 准备图片

    准备 一张 GIF 动图 1.gif,放置在报表工程%FR_HOME%\webapps\webroot\help\picture下。如下图所示:

    点击下载动图 :1.gif

    Snag_2d0811ab.png

    2.2 决策报表示例

    2.2.1 新建决策报表

    1)点击设计器左上角「文件>新建决策报表」,新建一张空白模板。

    2)将 body 背景设置为「自定义>没有背景」。因为在有颜色、图片、渐变色等背景时,设置的动态背景不生效。

    Snag_2d0f9ec6.png

    2.2.2 设置动态背景

    选中 body,添加一个「初始化后事件」。输入代码:

    //URL中的地址要填写图片的实际地址
    setTimeout(function() {
        $('.content-container').css({'background': 'url(/webroot/help/picture/1.gif)no-repeat','background-size':'100% 100%'});
    }, 1000);

    注:远程设计时,图片需放在服务器工程上对应的文件夹下。

    步骤如下图所示:

    Snag_2d124e27.png

    2.2.3 效果预览

    保存模板,点击「PC端预览」,效果如下图所示:

    注:不支持移动端。

    296B468C-F461-47F5-9144-B35CDCF9FED8.GIF

    2.3 普通报表示例

    在普通报表中,需要将「模板>纸张背景」设置为「自定义>颜色>透明」。如下图所示:

    Snag_2d1d8ba7.png

    设置动态背景的 JavaScript 代码相同,需在「模板>模板web属性」中设置。在对应的预览方式中,添加「加载结束」事件即可。如下图所示:

    Snag_2d23e37e.png

    3. 边框示例

    若想在报表中实现动态边框,可以通过在单元格中使用 WEBIMAGE 公式调用网页中的图片。

    3.1 设计报表

    1)新建决策报表,为方便查看效果,点击顶部菜单栏「模板>PC端自适应属性」,设置报表的布局方式为「绝对布局」。

    Snag_2d3dc161.png

    2)在 body 中 添加一个 报表块 report0。双击报表块进入表格编辑界面。合并一片单元格区域,插入公式:

    webimage("https://demo.finereport.com/help/picture/动态边框.gif")

    如下图所示:

    注:普通报表中同样合并单元格后,在单元格中插入相同公式即可。

    Snag_472700e4.png

    3.2 效果预览

    如果需要作为其他组件的边框,可以通过组件叠加的方式。如下图所示:

    Snag_2d42aebc.png

    保存模板,预览效果如下图所示:

    注:不支持移动端。

    657517E5-D8D3-46E0-B331-09DAC959F7E7.GIF

    4. 模板下载

    Attachment List


    Theme: 决策报表应用
    Already the First
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy