【JavaScript】純js動(dòng)態(tài)生成二維碼
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
一、使用jquery.qrcode生成二維碼 1、首先在頁(yè)面中加入jquery庫(kù)文件和qrcode插件 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.qrcode.min.js"></script> 2、在頁(yè)面中需要顯示二維碼的地方加入以下代碼： <div id="code"></div> 3、調(diào)用qrcode插件。支持canvas和table兩種方式進(jìn)行圖片渲染 canvas方式： $('#code').qrcode("http://www.baidu.com"); //任意字符串table方式： $("#code").qrcode({
render: "table", //table方式
width:200, //寬度
height:200, //高度
text: "www.helloweba.com" //任意內(nèi)容
});4、如果生成的二維碼內(nèi)容包含文字，需要把字符串轉(zhuǎn)換成UTF-8 定義轉(zhuǎn)化方法： 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;
}在生成的時(shí)候調(diào)用轉(zhuǎn)化方法： var str = toUtf8("字符串測(cè)試！");
$('#code').qrcode(str);二、在Vue-cli項(xiàng)目中動(dòng)態(tài)生成二維碼 1、引入qrcode--------npm install qrcode 2、在main.js中引入 import QRCode from 'qrcode' //定義生成二維碼組件 3、在需要使用到生成二維碼的組件中引入 import QRCode from 'qrcode' //引入生成二維碼組件 4、在HTML中定義生成的位置，注意添加樣式 <template> <div id="query"> <h1>二維碼：</h1> <canvas id="canvas"></canvas> </div> </template> #canvas{
width: 80%!important;
height: auto!important;
}5、在js中定義生成二維碼的方法并調(diào)用 //動(dòng)態(tài)生成二維碼
useqrcode(){
//生成的二維碼內(nèi)容，可以添加變量
this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;
var canvas = document.getElementById('canvas')
QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
if (error)
{
console.error(error);
}
else
{
console.log('success!');
}
})
}該文章在 2023/5/30 12:00:05 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
