位置: IT常识 - 正文

vue中生成条形码(jsbarcode)、二维码(qrcodejs2)(vue qrcode生成二维码)

编辑:rootadmin
vue中生成条形码(jsbarcode)、二维码(qrcodejs2)

推荐整理分享vue中生成条形码(jsbarcode)、二维码(qrcodejs2)(vue qrcode生成二维码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:生成vue代码片段的快捷键,vue 生成二维码,vue qrcode生成二维码,js 生成条形码,vue 条形码,vue代码生成,vue 生成二维码,vue扫一扫条形码功能,内容如对您有帮助,希望把文章链接给更多的朋友!

1.条形码插件jsbarcode

安装:npm install jsbarcode --save

引入:在需要生成条形码的页面引入即可

import JsBarcode from 'jsbarcode'

需要显示条形码的页面里

<img id="barcode1">

调用构造函数生成条形码

let barCode1 = this.info.marIdCode;let barheight = this.imgHeight;JsBarcode("#barcode1",barCode1,{ format:"CODE128",//条形码的格式 width:1,//线宽 height:barheight,//条码高度 lineColor:"#000",//线条颜色 displayValue:false,//是否显示文字 margin:2//设置条形码周围的空白区域})vue中生成条形码(jsbarcode)、二维码(qrcodejs2)(vue qrcode生成二维码)

2.二维码插件

安装:npm install qrcodejs2 --save

引入:同理,在需要生成二维码的页面中引入即可

import QRCode from 'qrcodejs2'

需要显示二维码的页面中

<div id="SetQRCode"></div>

根据自身需求逻辑使用

let qrCode = "#"+this.info.marId+"#"+this.info.supManufacturingBatch+"#"+this.info.exp+"#"+this.info.minflowId+"#"+this.info.num;this.QRCode = qrCode;let qrcodeDiv = document.getElementById("SetQRCode")let qrcode = new QRCode(qrcodeDiv,{ text:this.QRCode,//二维码中的内容 width:this.QRWidth, height:this.QRHeight, colorDark:"#000",//二维码颜色 correctLevel: QRCode.CorrectLevel.L //容错率,L/M/H})this.qrcode = qrcode;

好啦,如果只需要将二维码展示出来,不需要点击按钮才生成二维码或不需要打印的小伙伴看到这里就行啦~

打印!!!

在写二维码打印的时候我真的栓q住了,呜呜呜~ 因为进入打印页面后,点击取消,再次点击打印我惊讶地发现给我生成了两个二维码,然后……嗯,没错,重复上述操作会一直新生成二维码。

因此需要删除之前生成的二维码。代码如下:

let qrCode = "#"+this.info.marId+"#"+this.info.supManufacturingBatch+"#"+this.info.exp+"#"+this.info.minflowId+"#"+this.info.num;this.QRCode = qrCode;let qrcodeDiv = document.getElementById("SetQRCode")let qrcode = new QRCode(qrcodeDiv,{ text:this.QRCode, width:this.QRWidth, height:this.QRHeight, colorDark:"#000", correctLevel: QRCode.CorrectLevel.L }this.qrcode = qrcode;// ………………………………………………………………(解决重复点击打印按钮会重复一直生成二维码)let childs = document.getElementById("SetQRCode").childNodes;for(let i = childs.length -2 ; i>=0 ; i--){ document.getElementById("SetQRCode").removeChild(childs[i]);}
本文链接地址:https://www.jiuchutong.com/zhishi/295211.html 转载请保留说明!

上一篇:Vue 中 forEach() 的使用(vue foreach is not a function)

下一篇:花丛中的小穴鸮们,美国科罗拉多州 (© Roberta Olenick/Alamy)(昆明紫霞宫的46 道拐)

  • 职工薪酬支出及纳税调整
  • 一般纳税人没有开票要交税吗
  • 税务机关的义务是依法征管
  • 给离退休人员发的短信
  • 一般纳税人必须开13个点吗
  • 打印的电子发票需要盖章么
  • 注册公司服务费是多少
  • 建筑施工企业检查的内容包括什么
  • 事业编制公考
  • 非居民企业所得税源泉扣缴管理暂行办法
  • 查税是按基本账户吗
  • 跨年度取得增值税发票
  • 个人营业税是什么意思
  • 销售佣金税点
  • 增值税发票查验平台怎么查询发票
  • 一般纳税人能用小企业会计准则吗
  • 哪些发票公司可以抵扣
  • 财务报告成本
  • 增值税应税劳务的纳税人是什么意思
  • 无法访问您可能没有权限使用资源
  • 弥补亏损的会计分录是怎样的
  • 对违规送礼行为怎么处理
  • 怎么查上市公司
  • linux动态扩容
  • 一只猫在花园里英语
  • ipad哪款最贵
  • 房地产企业购地印花税如何入账
  • 对外投资概述
  • 超市进货产品
  • phpopendir
  • 补缴房产税和土地使用税会计分录
  • 竣工结算审计费用在线计算器
  • yolov4配置
  • js写数组去重
  • 将织梦dedecms转换到wordpress
  • 行政性收费和事业性收费 财政局
  • php判断https
  • mysql union or
  • rust 前端开发
  • 织梦系统安装教程
  • 如何利用税收经济效应实现税收的宏观调控目标
  • 增值税申报表填错不影响税额
  • 建筑工程维修费占总费用多少
  • 代开增值税额与实际缴款额差一分钱如何入账?
  • 个体工商营业执照注销需要缴费吗
  • 长租公寓如何纳税
  • 母公司与子公司关系
  • 营业成本占营业收入的比重过高
  • 总账设置包括哪些内容
  • mysql中具体到删某一个数据
  • mysql 最新稳定版本
  • win7旗舰版系统恢复
  • win8如何修改文件权限
  • 如何快速恢复么
  • linux怎么看历史记录
  • centos wi-fi
  • 升级怎么玩
  • 微软发布新系统
  • srvload.exe - srvload是什么进程
  • win10推送win11
  • xp装windows7
  • 怎么看win7
  • windows10总是提醒更新
  • win10registry
  • linux操作系统怎么装
  • linux自动重启程序脚本
  • nodejs实现微服务
  • js函数里的函数怎么调用
  • unity ngui
  • javascript类定义
  • 百度地图一口价为什么还多收费
  • 企业自产自销农产品免税政策有哪些
  • 陕西省国家税务总局班子成员
  • 铁路货运的费用有哪些
  • 开票员怎么登录电子税务局进行开票验证
  • 除了增值税还要什么税种
  • 广东省电子税务局app
  • 税控卡丢失怎么办
  • 土地交的契税会计科目
  • 艾地盟预混料怎么样
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设