位置: 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 道拐)

  • 如何正确利用微博来推广网站(如何正确利用微博参与政治生活)

    如何正确利用微博来推广网站(如何正确利用微博参与政治生活)

  • 抖音作者评论可以置顶吗(抖音里的评论作者是不是可以删除)

    抖音作者评论可以置顶吗(抖音里的评论作者是不是可以删除)

  • 钉钉开悬浮窗会记录时长吗(钉钉开悬浮窗会不会被发现)

    钉钉开悬浮窗会记录时长吗(钉钉开悬浮窗会不会被发现)

  • tp保护膜是什么

    tp保护膜是什么

  • iphone8plus是否支持5g(苹果8p支持)

    iphone8plus是否支持5g(苹果8p支持)

  • 美图手机微信分身怎么弄(美图手机微信怎么分身)

    美图手机微信分身怎么弄(美图手机微信怎么分身)

  • 电脑白屏怎么关机(电脑白屏幕了怎么退出)

    电脑白屏怎么关机(电脑白屏幕了怎么退出)

  • mix2是多少w快充(mix2最高支持几w快充)

    mix2是多少w快充(mix2最高支持几w快充)

  • 微信实名认证注销后会怎样(微信实名认证注销后重新实名认证还是原来的支付账户吗)

    微信实名认证注销后会怎样(微信实名认证注销后重新实名认证还是原来的支付账户吗)

  • 华为nova6 5g的SA和NSA是什么模式(华为nova6 5g的屏幕尺寸)

    华为nova6 5g的SA和NSA是什么模式(华为nova6 5g的屏幕尺寸)

  • ppt怎么设置切换速度为快速(PPT怎么设置切换动画)

    ppt怎么设置切换速度为快速(PPT怎么设置切换动画)

  • 华为如何分屏操作方法(华为如何分屏操作平板)

    华为如何分屏操作方法(华为如何分屏操作平板)

  • 电脑跑分是什么意思

    电脑跑分是什么意思

  • 怎样注册微信号新微信号(怎样注册微信号不用手机号)

    怎样注册微信号新微信号(怎样注册微信号不用手机号)

  • 备忘录的爱心怎么弄(备忘录爱心啥意思)

    备忘录的爱心怎么弄(备忘录爱心啥意思)

  • oppor15有没有呼吸灯功能(oppor15x有呼叫语音助手吗)

    oppor15有没有呼吸灯功能(oppor15x有呼叫语音助手吗)

  • 华为nova5pro耳机插哪里(华为nova5pro耳机孔在哪里)

    华为nova5pro耳机插哪里(华为nova5pro耳机孔在哪里)

  • 淘宝设置提醒怎么取消掉(淘宝设置提醒后的东西在哪)

    淘宝设置提醒怎么取消掉(淘宝设置提醒后的东西在哪)

  • cad图纸比例怎么看(cad图纸比例怎么换算)

    cad图纸比例怎么看(cad图纸比例怎么换算)

  • a1865是三网通吗(a1865支持电信卡吗)

    a1865是三网通吗(a1865支持电信卡吗)

  • xr没有电池百分比吗(苹果手机xr没有电池百分比)

    xr没有电池百分比吗(苹果手机xr没有电池百分比)

  • 苹果感光怎么关掉(苹果手机怎么取消感光)

    苹果感光怎么关掉(苹果手机怎么取消感光)

  • 两个卡怎么设置使用哪个的流量(手机用两个卡怎么设置)

    两个卡怎么设置使用哪个的流量(手机用两个卡怎么设置)

  • 小程序怎么推广(小程序怎么推广会比较好)

    小程序怎么推广(小程序怎么推广会比较好)

  • 怎么看淘宝消费总额(怎么看淘宝消费总金额)

    怎么看淘宝消费总额(怎么看淘宝消费总金额)

  • 小米蓝牙耳机防水吗(小米蓝牙耳机防水吗air2)

    小米蓝牙耳机防水吗(小米蓝牙耳机防水吗air2)

  • bn37是小米几的电池(bn36是小米什么手机)

    bn37是小米几的电池(bn36是小米什么手机)

  • sim卡应用老是跳出来(sim卡应用老是跳激活)

    sim卡应用老是跳出来(sim卡应用老是跳激活)

  • 将yolov5中的PANet层改为BiFPN(yolov5输出result)

    将yolov5中的PANet层改为BiFPN(yolov5输出result)

  • 一般纳税人开劳务发票几个点
  • 建筑公司跨区域迁入
  • 小规模纳税人的企业所得税税率
  • 进项认证以后如何开具红字信息表
  • 销售人员的工资属于什么会计科目
  • 快速撕发票的方法有哪些
  • 表外负债和表内负债对比
  • 购销合同印花税优惠政策
  • 企业呆账的处理方式
  • 购买商标权税率多少
  • 公司老板个人卡收款 出纳有责任吗
  • 增值税普通发票可以抵扣进项税吗
  • 公司部分公积金计入什么科目
  • 购入土地使用权增值税税率
  • 出口退税款计入收入总额吗
  • 建筑业甲供工程税率
  • 跨年度的费用发票,如何做分录
  • 收入可以用收据入账吗
  • 企业实缴出资额怎么查
  • 投资性房地产公允价值模式账务处理
  • 单位给个人付款分录
  • 应收账款的内容包括
  • xshell远程连接linux命令
  • mac os x 10.0
  • 设备安装需要预缴吗
  • 利息保障倍数 资本化利息支出
  • 固定资产终止确认的会计处理
  • 企业所得税的销售收入包括哪些
  • 在生产经营过程中违反什么规定
  • phpjson
  • php导入php文件
  • vue3setup语法糖如何定义realtive数据
  • transform模块
  • 微信小程序游戏手游排行榜
  • nmap的命令
  • 代理电信业务属于什么行业
  • 在建工程减值准备借贷方向
  • 无纸化的好处和坏处
  • 公司的基本户怎么换
  • 财政补助结转和财政补助结余
  • 什么是零申报,长期零申报有什么风险
  • 未发货先开票是否违法
  • 外贸企业出口退税会计分录怎么做
  • 水电费用属于会计的什么费用
  • 增值税发票价税合计不能超过多少
  • 同时安装vs2005团队开发版和sql 2005企业版的方法(downmoon原作)
  • 主营业务成本包括哪些
  • 新准则公允价值变动科目余额为负数
  • 往来款多了会怎么样
  • 因为培训发生的事情
  • 收到联营单位投入的款项98600元存入银行
  • 进料加工与来料加工
  • 社保可以不计提账务处理
  • 什么情形不属于共同犯罪
  • 工人的工资占企业的比例
  • 生产企业代理出口退税
  • 建筑公司劳务费怎么做账
  • 流动比率和速动比率过高说明什么
  • sqlserver数据库显示单个用户
  • Mysql主从同步的实现原理
  • mssqlserver安装
  • windows server 2008 日志文件在哪
  • mac的废纸篓
  • config是什么文件夹
  • 关闭win7屏保
  • windows7磁盘管理
  • win10系统最新版用户维护在哪
  • symtray.exe - symtray是什么进程 有何作用
  • linux中fdisk -l
  • windows10禁用独立显卡
  • android app 源码
  • 很实用的话
  • jquery和dom对象之间怎么转换
  • shell echo-e
  • c# unity 教程
  • android 实例教程
  • android开发前景
  • 更改国名
  • 新车怎么上深圳牌
  • 企业租入房子用交税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设