反馈已提交

网络繁忙

[通用]JS手机扫码添加联系人

  • 文档创建者:码农阿伟
  • 历史版本:8
  • 最近更新:RosieY 于 2022-12-30
  • 1. 概述

    1.1 预期效果

    注:通过此方案生成的二维码不支持导出,即导出时对应位置不显示二维码。

    根据报表表格中的信息生成二维码名片,在手机通讯录中扫描二维码之后可以快速将联系人添加到通讯录中。

    示例二维码如下图所示:

    1584518497605206.png

    扫码上面的二维码添加联系人的效果如下图所示:

    1584518722719704.gif

    1.2 实现思路

    实现此功能需要 jQuery 来获取元素,报表设计时需要引入外部 JS 和 CSS 文件,生成二维码是通过添加模板预览 JS 事件实现的。

    2. 示例

    2.1 报表设计

    新建模板,设计报表样式,如像下图所示:

    B1~B8 单元格用于填写联系人的名片信息,将根据 B1~B8 单元格的内容生成二维码。

    C1 单元格用于显示生成的二维码,需要添加文本:<div class="qrcode" id="qrcode"></div>

    Snag_ec796a.png

    2.2 引入 JS 和 CSS 文件

    1)点击下载 JS 文件:qrcode.js 

    2)点击下载 CSS 文件:qrcode.css

    3)将下载好的两个文件放置到:%FR_HOME%\webapps\webroot\help\css\路径下,如下图所示:

    1584520812837423.png

    注:二维码的大小在 CSS 文件中设置。

    4)设计器菜单栏点击「模板」>「模板Web属性」,如下图步骤引入 CSS 文件。

    1584521323393469.png

    5)设计器菜单栏点击「模板」>「模板Web属性」,如下图步骤引入 JS 文件。

    Snag_1004e22.png

    2.3 生成二维码

    1)设计器菜单栏点击「模板」>「模板Web属性」,选择「为该模板单独设置」,添加一个「加载结束」事件。如下图所示:

    JavaScript 代码如下:

    注:代码中对应的值需要通过 jQuery 选择器选取,详细内容可以参考相关资料:jQuery 选择器,如下图所示

     var name, company, title, address, mobile, email, web, desc;
     $(function() {
    name = "FN:" + $("#r-0-0 > td:nth-child(2)").text() + "\n";
    company = "ORG:" + $("#r-1-0 > td").last().text() + "\n";
    title = "TITLE:" + $("#r-2-0 > td").last().text() + "\n";
    address = "WORK:" + $("#r-3-0 > td").last().text() + "\n";
    mobile = "TEL:" + $("#r-4-0 > td").last().text() + "\n";
    email = "EMAIL:" + $("#r-5-0 > td").last().text() + "\n";
    web = "URL:" + $("#r-6-0 > td").last().text() + "\n";
    desc = "NOTE:" + $("#r-7-0 > td").last().text() + "\n";
    var info = "BEGIN:VCARD\n" + name + company + title + address + mobile + email + web + desc + "END:VCARD";
    //console.log(info);
    //生成二维码
    var qrcode = new QRCode("qrcode");
    qrcode.makeCode(info);
        })

    2.4 效果预览

    保存报表,点击「分页预览」,效果如 1.1节所示:

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\微信扫码添加联系人.cpt

    点击下载模板:微信扫码添加联系人.cpt

    4. 注意事项

    扫码添加联系人是支持在决策报表中实现的,但生成二维码的 JS 代码有所不同,需要在 JS 代码外层加入:

    setTimeout(function() {
    //代码
    }, 100);

    决策报表中获取表单单元格的值代码如下:

    $("#REPORT0").each(function(){  // 获取表格table中,第几个td的文本
       var t1 =$("#REPORT0").find('tr').eq(2).find('td').eq(1).text();
       alert("值:"+t1)
       })

    附件列表


    主题: 移动端应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持