[H5]移动HTML特殊链接实现打电话,发短信,发邮件

  • Last update:December 22, 2020
  • 1. 概述

    1.1 版本说明

    报表服务器版本App 版本移动端 HTML5  版本
    10.010.0V10.2.17

    1.2 应用场景

    设计报表时,我们往往需要实现一些友好的功能交互。

    比如:点击电话号码直接显示拨打电话或发送短信,点击邮箱直接发送邮件等。那么如何实现呢?

    注:该方法不支持 App 端。

    2. 示例

    2.1 添加内置数据集

    添加内置数据集,选择表设计,具体设计如下图所示。

    内置数据库1.png

    设计好之后点确定,选择插入行。输入联系人和手机号码等信息。具体完成效果如下图所示。

    内置数据库2.png

    2.2 设置模板样式

    设置模板的格式并将内置数据集的数据拖入单元格中。并在 D2,E2,F2 单元格中依次输入 “拨打电话” , “发送短信” ,“发送邮件” 。

    如下图所示:

    啊啊啊.png

    2.3 设置单元格公式形态

    点击 D2 单元格,选择单元格属性 - 形态,选择公式形态,输入 D2 公式:='<a href="tel:'+B2+'">'+$$$+'</a>' 

    如下图所示:

    第二个.png

    同上,设置单元格 E2 和 F2 的公式形态。

    E2 公式:='<a href="sms:'+B2+'">'+$$$+'</a>' 

    F2 公式:='<a href="mailto:'+C2+'">'+$$$+'</a>' 

    2.4 设置单元格的显示方式

    选中 D2、E2、F2 单元格,设置 单元格属性 > 其他 > 显示内容,选择【用 HTML 显示内容】。

    如下图所示:

    第五个.png   

    2.5 效果预览

    1)PC 端

    注:PC 端目前只支持发送邮件。

    发邮件.png

    2)H5 端

    1558339760672570.png

    3. 模板下载

    已完成模板可参见: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\移动端实现效果.cpt。

    点击下载模板:移动端实现效果.cpt

    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