在web页面上快速生成批量二维码的实用方法

最近帮同事制作了一个二维码工具，需求是一次性输入多个卡号批量生成二维码并打印。好了，现在我们直接看代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>礼品卡二维码生成</title><script type="text/javascript" src="./js/jquery.min.js"></script><script type="text/javascript" src="./js/jquery.qrcode.min.js"></script><style type="text/css">.codeBox{text-align: center;border: 3px solid black;overflow: hidden;margin-bottom: 900px;}.codeName{float: left; display:inline-block;text-align: center;margin: 15px;}img{width:140px;height:140px;border: 1px solid black;}p{font-size: 12px;}.clearfix:after{content:"";display:block;visibility:hidden;clear:both;height:0;}.clearfix{zoom:1;}.text{margin-bottom: 60px;}textarea,.storeNo{display: inline-block;}#storeNo{text-align: center;}</style></head><body><div class="text"><textarea cols="100" rows="20" oninput="this.value = this.value.replace(/[^\,\d]/g,'')" afterpastate></textarea><div class="storeNo"><span>店号：</span><input type="number" oninput="this.value = this.value.replace(/[^\d]/g,'')"></div><button onclick="getCardNum()">提交卡号并生成二维码</button></div><h2 id="storeNo">未输入店号</h2><div class="codeBox clearfix"></div></body><script type="text/javascript">function getCardNum(){let storeNo = $('input').val();let ArrCode = $('textarea').val().split(",");$('#storeNo').html(storeNo);makeQR(ArrCode)console.log('ArrCode:'+JSON.stringify(ArrCode))}function makeQR(arr){if(arr){/* 思路是先根据arr.length生成对应个数的html结构,再生成对应个数的二维码 */arr.reduce(function(per,current,index){var html = `<div id='code${index}' class='codeName'><h3>序号：${index}</h3><p>${current}</p></div>`;$(".codeBox").append(html);   //必须先生成html结构再生成二维码（顺序是重点）$('#code' + index).qrcode({width: 140,height: 140,text: current});},0)} else {alert("请输入内容！")}}</script>
</html>

现在我们来看看效果如何：

最后一步是打印：我们使用Ctrl+p快捷键就能直接打印出二维码了。整个过程借助了jq和qrcode工具实现，不需要后端参与。而且打印出来的二维码特别清晰！是不是特别方便呢？

最后附上代码地址：https://pan.baidu.com/s/1Pwj1kxcLj9G3n_qYV9swKw 提取码：sbw5

在web页面上快速生成批量二维码的实用方法相关推荐

在web页面上快速生成二维码的三种实用方法
转载自:在web页面上快速生成二维码的三种实用方法二维码是桌面和移动端快速分享的高效手段之一,这里介绍两个不错的快速开发二维码的方法,和大家分享一下~~ 方法1:使用极客标签提供的二维码快速生成服务 ...
生成(批量)二维码代码
需要导入google的zxingCore .jar包 // 生成二维码图片 public ActionForward createTwoCodeImg(ActionMapping mapping, A ...
生成QR二维码的多种方法
2019独角兽企业重金招聘Python工程师标准>>> 近来发现随着智能手机越来越普及,QR码(二维码)的使用也越来越多了,如网易应用下载中心.手机游戏下载网站.Google cod ...
thinkphp用phpqrcode生成二维码（含中间带logo、临时二维码）或生成微信二维码海报的方法
前期准备: 1.phpqrcode类文件下载,下载地址:https://sourceforge.net/projects/phpqrcode/ 2.PHP环境必须开启支持GD2扩展库支持(一般情况下都 ...
vue生成app二维码，并扫码下载app
文章目录项目需求开发 web官网下载页的开发 web官网地址生成下载二维码项目需求公司要做一个web官网的下载页面,功能是微信扫码可以直接下载Ios手机端app.Android手机端app.及 ...
java+vue的二维码生成，二维码上传服务器，二维码的压缩包下载
一. vue页面生成二维码 <template><div class="app-container">//在页面放着二维码的div<div id=&q ...
如何批量生成Maxicode二维码
Maxicode是一种中等容量.尺寸固定的矩阵式二维条码,它由紧密相连的六边形模组和位於符号中央位置的定位图形所组成.Maxicode是特别为高速扫瞄而设计,主要应用於包裹搜寻和追踪上.Maxicod ...
vue批量生成二维码，打印生成的二维码，并批量下载生成的二维码，qrcode
通过使用 qrcode 生成二维码, 使用 jszip 打包批量二维码文件, 使用 file-saver 下载打包好的zip文件, 使用 vue-print-nb 打印生成的二维码生成二维码: 打印 ...
批量生成含二维码和条形码的产品标签
今天跟大家分享下我们如何批量生成含二维码和条形码的产品标签.我们会用一个例子跟大家讲解制作过程.一般批量生成的标签,都会使用到数据库,所以小编这里也提前准备了一个数据库.如下图所示: 打开条码软件,先 ...

在web页面上快速生成批量二维码的实用方法

在web页面上快速生成批量二维码的实用方法相关推荐

最新文章

热门文章