［通用］JS手機掃碼新增聯絡人

1.1 預期效果

注：透過此方案生成的QRCODE不支援匯出，即匯出時對應位置不顯示QRCODE。

根據報表表格中的資訊生成QRCODE名片，在手機通訊錄中掃描QRCODE之後可以快速將聯絡人新增到通訊錄中。

範例QRCODE如下圖所示：

1.2 實現思路

實現此功能需要 jQuery 來獲取元素，報表設計時需要引入外部 JS 和 CSS 檔案，生成QRCODE是透過新增範本預覽 JS 事件實現的。

2.1 報表設計

建立範本，設計報表樣式，如像下圖所示：

B1~B8 儲存格用於填寫聯絡人的名片資訊，將根據 B1~B8 儲存格的內容生成QRCODE。

C1 儲存格用於顯示生成的QRCODE，需要新增正文：<div class="qrcode" id="qrcode"></div>

2.2 引入 JS 和 CSS 檔案

1）點選下載 JS 檔案：qrcode.js 

2）點選下載 CSS 檔案：qrcode.css

3）將下載好的兩個檔案放置到：%FR_HOME%\webapps\webroot\help\css\路徑下，如下圖所示：

注：QRCODE的大小在 CSS 檔案中設定。

4）設計器菜單欄點選範本>範本Web屬性，如下圖步驟引入 CSS 檔案。

5）設計器菜單欄點選範本>範本Web屬性，如下圖步驟引入 JS 檔案。

2.3 生成QRCODE

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);
//生成QRCODE
var qrcode = new QRCode("qrcode");
qrcode.makeCode(info);
    })
显示代码

2.4 效果預覽

儲存報表，點選分頁預覽，效果如 1.1節所示：

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實體\微信掃碼新增聯絡人.cpt

點選下載範本：微信掃碼新增聯絡人.cpt

掃碼新增聯絡人是支援在決策報表中實現的，但生成QRCODE的 JS 程式碼有所不同，需要在 JS 程式碼外層加入：

setTimeout(function() {
	//程式碼
}, 100);

決策報表中獲取表單儲存格的值程式碼如下：

$("#REPORT0").each(function(){  // 獲取表格table中，第幾個td的正文
    var t1 =$("#REPORT0").find('tr').eq(2).find('td').eq(1).text();
    alert("值:"+t1)
    })