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

  • 8个关键词,带你看懂2016年视频内容营销新突破(8种关键词语)

    8个关键词,带你看懂2016年视频内容营销新突破(8种关键词语)

  • 如何通过微博旧昵称找新名字(如何通过微博旧号找回)

    如何通过微博旧昵称找新名字(如何通过微博旧号找回)

  • vivo y70s有指示灯吗(vivoy70s提示灯怎么调)

    vivo y70s有指示灯吗(vivoy70s提示灯怎么调)

  • 苹果手机有个框框乱跳怎么消除(苹果手机有个框框怎么去打开密码)

    苹果手机有个框框乱跳怎么消除(苹果手机有个框框怎么去打开密码)

  • 苹果能应用分身不(苹果如何应用分身)

    苹果能应用分身不(苹果如何应用分身)

  • 为什么手机看视频不能全屏了(为什么手机看视频会自动暂停)

    为什么手机看视频不能全屏了(为什么手机看视频会自动暂停)

  • 电脑小白怎么买电脑(电脑小白怎么买主机)

    电脑小白怎么买电脑(电脑小白怎么买主机)

  • qq的帆船图标啥意思(qq的帆船标志怎么消失)

    qq的帆船图标啥意思(qq的帆船标志怎么消失)

  • 5sa1530支持哪些网络(5sa1530支持电信卡吗)

    5sa1530支持哪些网络(5sa1530支持电信卡吗)

  • qq音乐内测版是每个人都有吗(qq 音乐官方内测)

    qq音乐内测版是每个人都有吗(qq 音乐官方内测)

  • 声卡坏了怎么修复(笔记本的声卡坏了怎么办)

    声卡坏了怎么修复(笔记本的声卡坏了怎么办)

  • qq远程控制可以听到声音吗(qq远程控制可以用手机控制电脑吗)

    qq远程控制可以听到声音吗(qq远程控制可以用手机控制电脑吗)

  • 抖音共同关系什么意思(抖音什么叫共同关注)

    抖音共同关系什么意思(抖音什么叫共同关注)

  • 微信注销后能查到什么(微信注销后能查到身份吗)

    微信注销后能查到什么(微信注销后能查到身份吗)

  • 电脑怎么设置电源(电脑怎么设置电脑壁纸)

    电脑怎么设置电源(电脑怎么设置电脑壁纸)

  • ios13原彩显示怎么没了(iphone13原彩显示没反应)

    ios13原彩显示怎么没了(iphone13原彩显示没反应)

  • 苹果系统怎么删除软件(苹果系统怎么删除分区)

    苹果系统怎么删除软件(苹果系统怎么删除分区)

  • 安居客发布的信息怎么取消(安居客发布的信息在哪里能够看到)

    安居客发布的信息怎么取消(安居客发布的信息在哪里能够看到)

  • vivo相册误删怎么恢复(vivo手机相册误删了怎么办)

    vivo相册误删怎么恢复(vivo手机相册误删了怎么办)

  • 如何改微信收款二维码(如何改微信收款二维码名字)

    如何改微信收款二维码(如何改微信收款二维码名字)

  • Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

    Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流

  • 帝国ECMS怎么实现AJAX无刷新加入购物车(帝国cms模板怎么样用)

    帝国ECMS怎么实现AJAX无刷新加入购物车(帝国cms模板怎么样用)

  • 从农民手中收购粮食如何计算进项税
  • 房产企业季度预测
  • 税法有哪些构成要素及各要素之间有何关系
  • 附加税费计税依据
  • 工资表领导签字怎么签
  • 收取不合规发票怎么处理
  • 电梯合同属于什么合同
  • 资本公积与什么有关
  • 罚款所得税调整
  • 总公司亏损分公司盈利如何处理
  • 利润表中所得税费用为负数是什么意思
  • 税报完了可以撤销吗
  • 小微企业免征增值税报表填写
  • 集团对子公司投资收益协议
  • 出口已使用过的设备退税吗
  • 收入不交税怎么处理
  • 未分配利润为什么不分配
  • 领专票需要带什么东西
  • 企业进口葡萄酒税率多少
  • win11发布时间正式确定
  • php中字符串函数
  • 附有退货条款的销售
  • php options
  • 外资企业如何
  • 股票公允价值减值怎么做账
  • 营改增会计分录
  • babylon.exe进程有什么作用 babylon进程是什么文件
  • 户外广告位怎么收费
  • thinkphp3.1.3手册
  • 旅游企业税务筹划
  • vue无线滚动
  • xml格式化输出
  • 股权融资服务协议
  • 公章没有数字是什么情况
  • vue中proxy代理?
  • thinkphp官网
  • dem如何生成
  • 车间主要有哪些事故风险
  • wordpress安装插件无法复制
  • python中的sum函数怎么用
  • 公司现金发放证明
  • 基础土建工程是干什么的
  • 购买股权溢价部分怎么做账
  • 租用办公室装修费用会计分录
  • 帝国cms怎么用
  • c语言strncat函数用法
  • 专家评审费属于咨询费吗
  • 资产负债表其他综合收益
  • 可供出售金融资产现在叫什么
  • 查询发票真伪
  • 代付电费开发票
  • 跨月发票红冲还要交税吗
  • 土地出让金抵减增值税
  • 培训机构账务处理
  • 买断式与回购式
  • 零配件供应是什么意思
  • 如何删除win10系统
  • p2p是什么文件
  • linux dd测试
  • 万能重装系统
  • ubuntu16.04 ssh连接不上
  • linux中bc命令
  • linux的文件和目录的区别
  • msoxmled.exe是什么软件
  • win7系统按Ctrl+Shift不能切换输入法的图文教程
  • windows mobile应用
  • win8设置开机启动程序
  • win7系统回收站文件夹的位置
  • unity3D游戏开发
  • Tcp/ip协议族
  • jQuery获取checkbox选中的值
  • javascript文本框获得焦点
  • ORMLite完全解析(四) 官方文档第四章、在Android中使用
  • 常见的java数据类型有哪些
  • 减免所得税额怎样计算
  • 税务编号是什么 个人
  • 光伏发电备案证如何办理
  • 票表比对不通过代码999
  • 我的电脑软件下载
  • 什么是社保补缴的标准
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设