草庐IT

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

小余又菜又爱玩前端 2023-04-18 原文

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//设置条形码周围的空白区域
})

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]);
}

中生条形this34language-javascriptvue.jsjavascript前端

有关vue中生成条形码(jsbarcode)、二维码(qrcodejs2)的更多相关文章

  1. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  3. ruby - 在 ruby​​ 中生成一个进程，捕获 stdout，stderr，获取退出状态 - 2

    我想从ruby​​rake脚本运行一个可执行文件，比如foo.exe我希望将foo.exe的STDOUT和STDERR输出直接写入我正在运行rake任务的控制台.当进程完成时，我想将退出代码捕获到一个变量中。我如何实现这一目标？我一直在玩backticks、process.spawn、system但我无法获得我想要的所有行为，只有部分更新:我在Windows上，在标准命令提示符下，而不是cygwin 最佳答案 system获取您想要的STDOUT行为。它还返回true作为零退出代码，这可能很有用。$?填充了有关最后一次system调

  4. Ruby -> 写入二维数组 - 2

    我正在处理http://prepwork.appacademy.io/mini-curriculum/array/中概述的数组问题我正在尝试创建函数my_transpose，它接受一个矩阵并返回其转置。我对写入二维数组感到很困惑!这是一个代码片段，突出了我的困惑。rows=[[0,1,2],[3,4,5],[6,7,8]]columns=Array.new(3,Array.new(3))putscolumns.to_s#Outputisa3x3arrayfilledwithnilcolumns[0][0]=0putscolumns.to_s#Outputis[[0,nil,nil],[

  5. ruby - 如何在 Ruby 中生成一个非常大的随机整数？ - 2

    我想在ruby​​中生成一个64位整数。我知道在Java中你有很多渴望，但我不确定你会如何在Ruby中做到这一点。另外，64位数字中有多少个字符？这是我正在谈论的示例......123456789999。@num=Random.rand(9000)+Random.rand(9000)+Random.rand(9000)但我认为这是非常低效的，必须有一种更简单、更简洁的方法来做到这一点。谢谢! 最佳答案 rand可以将范围作为参数:pa=rand(2**32..2**64-1)#=>11093913376345012184putsa.

  6. ruby - 从数组中生成哈希 - 这是如何工作的？ - 2

    fruit=["apple","red","banana","yellow"]=>["apple","red","banana","yellow"]Hash[*fruit]=>{"apple"=>"red","banana"=>"yellow"}为什么splat会导致数组被如此整齐地解析为Hash？或者更准确地说，Hash如何“知道”“apple”是键，“red”是其对应的值？仅仅是因为它们在水果数组中的位置是连续的吗？这里使用splat有关系吗？否则哈希不能直接从数组中定义自己吗？ 最佳答案 作为documentation状态:H

  7. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  8. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进

  9. ruby - 如何在 Ruby 中生成锦标赛时间表？ - 2

    我一直在到处搜索，包括StackOverflow文件，寻找如何执行此操作的答案，我尝试自己动手，但没有找到答案，所以我决定在这里发布我的请求。我需要在数组中获取任意(偶数)个项目，并返回与数组中另一个项目配对的项目。我需要代码的输出与我在下面包含的输出示例相同。输入:('A'..'H').to_a输出:[[['A','H'],['B','G'],['C','F'],['D','E']],[['A','G'],['B','F'],['C','E'],['D','H']],[['A','F'],['B','E'],['C','D'],['G','H']],[['A','E'],['B','

  10. ruby-on-rails - 在 rails 中生成二维码 - 2

    我想在ruby​​onrails中生成QR码，以便在我用rails编写的网站后台运行。看到这个http://code.google.com/p/qrcode-rails/但无法弄清楚如何让它为我工作。基本上在RoR中，我想:向生成器传递一个字符串、我的唯一代码、一个20个字符长度的数字(例如32032928889998887776)并生成一个名为“代码”_qr.jpg的图像并保存在资源文件夹中以附加到我的电子邮件中程序将发出。我该怎么做，有人知道吗？虽然我在问(不是很重要，我现在得到这个答案)但是我如何实现QR码读取，以从网络摄像头取回该代码？谢谢。 最佳答

随机推荐