H5 使用jsBarcode qrcodejs 生成二维码 条形码

简介: H5 使用jsBarcode qrcodejs 生成二维码 条形码

jsBarcode:

https://lindell.me/JsBarcode/#

qrcodejs:

https://github.com/davidshimjs/qrcodejs

HTML

         <div id="qrcode" ref="qrcode" style="margin: 10px;"></div>  
         <svg id="barcode"></svg> 

script

<script src="js/qrcode.js"></script>
<script src="js/jsbarcode.js"></script>

JS

methods: {
    qrCode (url) {
           // 二维码
            let qrcode = new QRCode('qrcode', {
                width: 180, 
                height: 180,    
                correctLevel : QRCode.CorrectLevel.H     
            })    
            qrcode.clear() //清除二维码 
            qrcode.makeCode(url) //生成另一个新的二维码
            // 条形码
            JsBarcode("#barcode", url,{ 
              height: 50,
              width: 2.2,
              fontSize: 14
            });
        }
       },
        mounted () {
          this.qrCode('123456789')
        }

效果:

image.png

相关文章
|
2月前
uniapp条形码实现
uniapp条形码实现
47 0
|
7月前
|
自然语言处理
二维码美化指南:从Logo到文字,轻松制作专属二维码
草料二维码提供基础的二维码美化设置,包含Logo、颜色、码点码眼、容错、添加文字等设置。
126 0
|
7月前
|
Python
生成二维码
使用Python生成二维码可借助`qrcode`库。安装库:`pip install qrcode[pil]`。创建二维码的步骤如下: ```python import qrcode
116 0
|
7月前
uniapp生成条形码?
uniapp生成条形码?
使用jsbarcode生成条形码
使用jsbarcode生成条形码
164 0
|
Java Maven
让一句话生成一张二维码图片
让一句话生成一张二维码图片
|
边缘计算 并行计算 算法
Opencv+ZBar识别条形码、二维码
Opencv+ZBar识别条形码、二维码
832 0
Opencv+ZBar识别条形码、二维码
|
移动开发
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码