1、首先在頁面中加入jquery庫文件和qrcode插件。 ? 1 2 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js" ...
1、首先在頁面中加入jquery庫文件和qrcode插件。
?| 1 2 |
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
|
2、在頁面佈局中添加一個div
?| 1 2 3 |
<div class="modal-body" id="qrCode" style="left:40px">
</div>
|
3、調用qrcode插件。
?| 1 2 3 4 5 6 |
var str = "http://" + location.host + "/ActivityDetail.html?id=" + row.ActivityGuid + "&isMail=" + row.isMail + "";
$("#qrCode").empty();
$('#qrCode').qrcode(str);
//$('#qrCode').qrcode("//www.jb51.net");//任意字元串
|
4、我們試驗的時候發現不能識別中文內容的二維碼，通過查找多方資料瞭解到，jquery-qrcode是採用charCodeAt()方式進行編碼轉換的。而這個方法預設會獲取它的Unicode編碼，如果有中文內容，在生成二維碼前就要把字元串轉換成UTF-8，然後再生成二維碼。您可以通過以下函數來轉換中文字元串：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function toUtf8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
|
可以把這個方法直接寫入到引用的插件裡面，後面直接調用即可。如下：
?| 1 2 |
var str = toUtf8("2017雞年大吉！");
$('#qrCode').qrcode(str);
|
