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

简介: H5 使用jsBarcode qrcodejs 生成二维码 条形码
https://lindell.me/JsBarcode/#
https://github.com/davidshimjs/qrcodejs
         <div id="qrcode" ref="qrcode" style="margin: 10px;"></div>  
         <svg id="barcode"></svg> 
<script src="js/qrcode.js"></script>
<script src="js/jsbarcode.js"></script>
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

相关文章
|
NoSQL 编译器 Linux
CodeBlocks-20.03下载安装及中文教程
CodeBlocks强大之处 1、跨平台,windows、linux 、mac都可以用 2、轻量化,远不及VS占用空间 3、完全免费
3226 1
CodeBlocks-20.03下载安装及中文教程
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
如何获取与设置光标在input框的位置
|
Linux
linux常用命令-离线安装PM2
因为要部署应用的机器没有公网连接,所以直接npm install pm2是不可能了, 简单记录一下怎么离线安装pm2
1194 0
uniapp条形码实现
uniapp条形码实现
296 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的宠物领养系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的宠物领养系统的详细设计和实现
232 2
|
Kubernetes 数据安全/隐私保护 Docker
kubeadm 工具实验 k8s一键安装
kubeadm 工具实验 k8s一键安装
|
NoSQL Java 关系型数据库
若依后端项目如何进行部署
若依后端项目如何进行部署
|
安全 API 开发者
使用阿里巴巴API获取商品详情的实践指南
摘要:本文将详细介绍如何使用阿里巴巴API获取商品详情数据,包括API的申请、认证、调用等步骤,并提供相关的代码示例。通过本文的实践指南,读者将能够轻松获取阿里巴巴平台上的商品信息,为业务开发提供有力支持。
|
Oracle 关系型数据库
行列转换利器:Oracle pivot函数全面解析
行列转换利器:Oracle pivot函数全面解析
308 0
行列转换利器:Oracle pivot函数全面解析