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

相关文章
|
移动开发
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
H5 使用jsBarcode qrcodejs 生成二维码 条形码
|
程序员 C# 图形学
C# 生成二维码,彩色二维码,带有Logo的二维码及普通条形码
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默。我眼中的程序员大多都不爱说话,默默承受着编程的巨大压力,除了技术上的交流外,他们不愿意也不擅长和别人交流,更不乐意任何人走进他们的内心!    废话少说,咱直接进入正题:    目前来说,比较流行的二维码生成方式有两种:一种是:QrCode.Net和谷歌的Zxing.Net,我个人比较倾向于使用ZXing.Net,今天本篇博客主要讲解Zxing.Net的使用。
1999 0
|
C# Java Android开发
用C#实现的条形码和二维码编码解码器
原文 用C#实现的条形码和二维码编码解码器 本篇介绍可以在C#中使用的1D/2D编码解码器。条形码的应用已经非常普遍,几乎所有超市里面的商品上面都印有条形码;二维码也开始应用到很多场合,如火车票有二维码识别、网易的首页有二维码图标,用户只需要用手机扫描一下就可以看到手机版网易的网址,免去了输入长串字符的麻烦。
2375 0
|
人工智能 Windows
|
4月前
uniapp条形码实现
uniapp条形码实现
72 0
|
9月前
uniapp生成条形码?
uniapp生成条形码?
使用jsbarcode生成条形码
使用jsbarcode生成条形码
176 0
EAN13条形码的知识
EAN13码标准码共13位数,系由「国家代码」3位数,「厂商代码」4位数,「产品代码」5位数,以及「检查码」1位数组成。其排列如下:   EAN-13码的结构与编码方式如图 3.1所示,包括: 1.国家号码由国际商品条码总会授权,我国的「国家号码」为「691」。厂商代码由国家商品条码策进会核发给申请厂商,占四个码,代表申请厂商的号码。 产品代码占五个码,系代表单项产品的号码,由厂商自
1347 0

热门文章

最新文章