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

相关文章
|
API 开发工具 Python
钉钉有没有获取群消息内容的接口?怎么提工单(bug反馈或技术答疑)?
钉钉有没有获取群消息内容的接口?怎么提工单(bug反馈或技术答疑)?【1月更文挑战第6天】【1月更文挑战第29篇】
1566 1
|
JavaScript 前端开发 数据库
让你少踩坑的fastadmin教程(3)
让你少踩坑的fastadmin教程
2072 0
让你少踩坑的fastadmin教程(3)
|
SQL 数据库连接 网络安全
thinkphp SQLSTATE[08001]: [Microsoft][ODBC Driver 18 for SQL Server]SSL Provider: [error:14090086:SSL routine
thinkphp SQLSTATE[08001]: [Microsoft][ODBC Driver 18 for SQL Server]SSL Provider: [error:14090086:SSL routine
1675 0
|
存储 Ubuntu 安全
在Ubuntu 16.04上安装openjdk-6/7/8-jdk的步骤
在整个安装过程中,你可能需要管理员权限,因此你可能要使用 `sudo` 来获取必要的权限。记得做完每一个步骤后,都要检查输出,以确保没有发生错误,并且每项操作都成功完成。如果在安装过程中遇到问题,查看 `/var/log/` 下的日志文件对于问题的解决可能是有帮助的。
851 21
|
10月前
|
自然语言处理 搜索推荐 机器人
阿里云中国智能客服市场份额蝉联第一
国际数据公司IDC发布《中国智能客服市场份额,2024》,阿里云 2024 年在中国智能客服市场份额占比 11.4%,持续位居第一。累计服务互联网、零售、金融、保险、医疗、教育、政务、交通物流、汽车等行业超 5000 家企业客户。
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
5774 0
|
JavaScript 前端开发
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
vue 富文本编辑器 quill (含代码高亮、自定义字体、汉化、鼠标悬浮提示、组件封装等)
1737 0
|
数据采集 缓存 自然语言处理
PHP将HTML标签转化为图片
通过这个方法,PHP后端能够实现将HTML内容转化为图片的功能。这种方式虽然牵涉到一些额外的安装和配置,但能够相对灵活且稳定地解冀转换需求,适用于需要在后端动态生成图片的场景。
796 1
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
Vscode 插件-代码敲出不同的特效
Vscode 插件-代码敲出不同的特效
685 0

热门文章

最新文章