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

相关文章
|
1月前
uniapp条形码实现
uniapp条形码实现
32 0
|
6月前
|
Python
生成二维码
使用Python生成二维码可借助`qrcode`库。安装库:`pip install qrcode[pil]`。创建二维码的步骤如下: ```python import qrcode
103 0
|
6月前
uniapp生成条形码?
uniapp生成条形码?
使用jsbarcode生成条形码
使用jsbarcode生成条形码
154 0
条码二维码输出PDF文件的方法
有些印刷或打印设备是以PDF文件的导入方式来批量打印,Label mx 标签软件可以满足这个要求,支持任何PDF虚拟打印机将整个标签以排版的方式多页输出为一个PDF文件。
177 0
|
边缘计算 并行计算 算法
Opencv+ZBar识别条形码、二维码
Opencv+ZBar识别条形码、二维码
777 0
Opencv+ZBar识别条形码、二维码
|
移动开发
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
|
程序员 C# 图形学
C# 生成二维码,彩色二维码,带有Logo的二维码及普通条形码
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默。我眼中的程序员大多都不爱说话,默默承受着编程的巨大压力,除了技术上的交流外,他们不愿意也不擅长和别人交流,更不乐意任何人走进他们的内心!    废话少说,咱直接进入正题:    目前来说,比较流行的二维码生成方式有两种:一种是:QrCode.Net和谷歌的Zxing.Net,我个人比较倾向于使用ZXing.Net,今天本篇博客主要讲解Zxing.Net的使用。
1975 0