前端動態生成二維碼與條形碼
二維碼
1.匯入qrcode.js
vue專案：在main.js中引入匯入的qrcode.js檔案
import '../static/js/qrcode.js'
在需要顯示二維碼的頁面
<div>
<div id="qrcode"></div>
</div>
js:
mounted(){
var qrcode = new QRCode('qrcode', {
text: 'your content',
width: 256,
height: 256,
colorDark : '#000000',
colorLight : '#ffffff',
correctLevel : QRCode.CorrectLevel.H
});
}
2.匯入jquery.qrcode.min.js
在需要生成二維碼的頁面中
mounted(){
this.$nextTick(function(){
require('../../static/js/jquery.qrcode.min.js');
this.qrcode();
})
}
methods:{
qrcode(){
$("#qrcode").qrcode({
text: "http://www.baidu.com",
width:200,
height:200
});
},
}
條形碼
html頁面：
<div class="qrCanvas">
<canvas id="canvascode"></canvas>
</div>
給畫布定寬高
js:
$('#canvascode').JsBarcode(‘引數’)