使用前端QrCode.js实现根据输入内容生成二维码，并提供二维码下载功能（已使用在交付项目中）
2024-04-29 19:03:19
前端QrCode 根据输入内容生成二维码，并提供二维码下载功能
简介：这是一个使用前端QrCode自动生成二维码并下载二维码图片的项目。
项目背景：在某个项目的交付阶段，客户提出需要一个可手动生成二维码的系统，用来将生成的产品编号的二维码贴到产品上，然后使用扫码枪扫码，实现自动复核产品的功能。
实现：我是个java工程师，虽然有一些html、js、hbuild、vue基础,但是还是够呛。两天时间，上天入地，终于集大神代码于一身，根据实际需求实现了该功能。
项目截图：
- 注意：因为我自身项目的原因，二维码的内容的前缀默认加“#”，例如：123456，生成的二维码读取后是：#123456，又如：#123456，生成的二维码读取后是：#123456。就是说默认加“#”前缀。如果你不需要，可以去掉。
- 使用方法：
1.输入要生成二维码的内容
2.选择生成二维码图片大小
3.选择生成二维码的背景色
4.生成二维码并下载
代码实现
总体的逻辑代码全都写到一个html中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<title>XXXXXXXX有限公司</title>
<link rel="Shortcut Icon" href="logo.ico">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />-->
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qrcode.min.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script src="layui/lay/modules/form.js"></script>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div class="allCode">
<div class="tittleCode">
<h1>XXXXXXXX有限公司二维码生成系统</h1></div>
<div class="qrCode"><div class="configure"><div class="inputUrl"><span style="display:block;height:40px;line-height:40px;float:left;">输入条码：</span><input type="text" id="text" placeholder="请输入条码！",value="" oninput="qrcodeempty()"/></div><div class="inputUrl"><span style="display:block;height:40px;line-height:40px;float:left;">图片大小：</span><select class="qrSize"><option value="80">80 X 80</option><option value="100">100 X 100</option><option value="150">150 X 150</option><option value="200">200 X 200</option><option value="300">300 X 300</option></select></div><div class="inputUrl"><span style="display:block;height:40px;line-height:40px;float:left;">背景颜色：</span><input type="text" readonly value="#ffffff" id="qrBGC" /><div id="test2" style="height:40px;line-height:40px;width:40px;top:-40px;left:300px;"></div></div><div class="inputUrl"><span style="display:block;height:40px;line-height:40px;float:left;">前景颜色：</span><input type="text" readonly value="#000000" id="qrFGC" /><div id="test3" style="height:40px;line-height:40px;width:40px;top:-40px;left:300px;"></div></div><div class="inputUrl"><a class="layui-btn createQRBtn">生成二维码</a></div><div class="inputUrl"><a class="layui-btn downloadQRBtn">下载图片</a></div></div><div id="qrcode" style="float:right;">这里将生成二维码图片！</div><div style="clear:both;"></div>
</div>
</div><footer class="footer">Copyright © 2020 XXXXXXXX有限公司 杜盟恩 版权所有</footer><style type="text/css">body{// position: fixed;height: 100%;width: 100%;background: url(login-bg.jpg) no-repeat;background-size: cover;
}
.footer {height: 30px;background-color: #e9e9e9;width: 100%;color: #434343;text-align: center;line-height: 30px;position: absolute;bottom: 0;font-size: 15px;
}.allCode {width: 100%;height: auto;min-height: 700px;}.tittleCode {width: 55%;height: 50px;min-height:auto;margin-left: auto;margin-right: auto;margin-top:20px;background: #2B6FD5;box-shadow: #777 0px 0px 10px 0px;padding: 30px;border-radius: 8px;font-weight:bold;font-size:20px;color:#fbfbfb;text-align:center;}.qrCode {width: 55%;height: auto;min-height: 500px;margin-left: auto;margin-right: auto;margin-top:5px;background: #ffffffcc;box-shadow: #777 0px 0px 10px 0px;padding: 30px;border-radius: 8px;}.configure {max-width: 400px;width: auto;height: auto;min-height: 300px;float: left;display: inline-block;}.inputUrl {float: left;height: 40px;margin-bottom: 32px;display: inline-block;width: 100%;}.inputUrl a {text-decoration: none;}#text {height: 40px;line-height: 30px;border-radius: 3px;padding: 3px;width: auto;right: 10px;max-width: 400px;min-width: 200px;resize: none;padding-left: 10px;border: 1px solid black;}#text:hover {border: 1px solid blue;box-shadow: red 0px 0px 10px 0px;}.qrSize {height: 40px;line-height: 30px;border-radius: 3px;padding-left: 10px;padding: 3px;max-width: 280px;width: auto;border:1px solid #aaa7a7;}#qrcode {width: auto;height: auto;padding: 10px;border: 1px solid #009688;border-radius: 5px;display: inline-block;margin-left: 10px;margin-right:90px;min-height:50px;min-width:50px;}#test2 div {width: 40px;height: 40px;}#test3 div {width: 40px;height: 40px;}#qrBGC {display: inline-block;width: 130px;height: 36px;line-height: 40px;border-radius: 3px;border: 1px solid #808080;padding-left: 10px;}#qrFGC {display: inline-block;width: 130px;height: 36px;line-height: 40px;border-radius: 3px;border: 1px solid #808080;padding-left: 10px;}.createQRBtn {/*max-width: 350px;*/width: 60%;margin-left: 20%;height: 40px;line-height: 40px;text-decoration: none;}.downloadQRBtn {width: 60%;margin-left: 20%;height: 40px;line-height: 40px;text-decoration: none;}.layui-colorpicker-trigger-i {display: inline-block;color: #009688;font-size: 12px;
}
</style>
<script type="text/javascript">
/**var imgSrc=['login-bg.jpeg'];
function load(imgSrc,callback) { //imgSrc参数是页面中要预加载的图片的路径数组，如imgSrc=['img/xx.png','img/xxx.png'...],callback就是你加载完图片之后要执行的函数var imgs = [];var c = 0;for (var i = 0; i < imgSrc.length; i++) {imgs[i] = new Image();imgs[i].src = imgSrc[i];imgs[i].onload = function(){c++if(c == imgSrc.length){if(callback){callback();}}}}return imgs; //返回加载的图片列表，这个省略也没有问题
}**///监听输入的值为空时，清空二维码
function qrcodeempty(){var elText = document.getElementById("text");$("#qrcode").empty();elText.focus();return;}//初始化二维码var qrcode = new QRCode(document.getElementById("qrcode"), {width: 200,height: 200});//生成二维码function makeCode() {var elText = document.getElementById("text");if (!elText.value) {alert("请输入条码！");elText.focus();return;}else{if(elText.value.substring(0,1)==='#'){elText.value.substring(1,cqrcode.length)}}$("#qrcode").empty();qrcode = new QRCode(document.getElementById("qrcode"), {width: $(".qrSize").val(),height: $(".qrSize").val(),colorLight: $("#qrBGC").val(),colorDark: $("#qrFGC").val()});qrcode.makeCode(elText.value);}//下载二维码function downloadIamge() {var imgs = document.getElementById("qrcode").getElementsByTagName("img")var a = document.createElement('a')var date = new Date(new Date().getTime());var Y = date.getFullYear() + '-';var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';var D = date.getDate() < 10 ? '0' + date.getDate() + ' ':date.getDate()+ ' ';var h = date.getHours() < 10 ? '0' + date.getHours():date.getHours();var m = date.getMinutes() < 10 ? '0' + date.getMinutes():date.getMinutes();var s = date.getSeconds() < 10 ? '0' + date.getSeconds():date.getSeconds();var code = document.getElementById("text").value;if(code.substring(0,1)==='#'){code.substring(1,cqrcode.length)}a.download = code + ' ' + Y + M + D + h + m + s || '下载图片名称'a.href = imgs[0].srcdocument.body.appendChild(a);var elText = document.getElementById("text");if (!elText.value) {alert("请输入条码！");elText.focus();return;}a.click();document.body.removeChild(a);}$(document).ready(function () {//makeCode();$("#text").on("keydown", function (e) {if (e.keyCode == 13) {makeCode();}});//点击生成二维码$(".createQRBtn").click(function () {makeCode();});//点击下载二维码$(".downloadQRBtn").click(function () {if ($("#qrcode:has(img)").length == 0) {alert("请先生成二维码再点击下载！");}else {downloadIamge(); }});$(".inputUrl").each(function () {$(this).children("input").css({ "width": ($(this).width() - 120) + "px" });$(this).children("select").css({ "width": ($(this).width() - 120) + "px" });});var windowsWidth = $(window).width();if (windowsWidth > 168) {$(".qrSize").append('<option value="400">400 X 400</option>');$(".qrSize").append('<option value="500">500 X 500</option>');}});
</script><script type="text/javascript">layui.use('colorpicker', function () {var colorpicker = layui.colorpicker;//初始色值colorpicker.render({elem: '#test2', color: '#ffffff' //设置默认色, done: function (color) {$("#qrBGC").val(color);}}); colorpicker.render({elem: '#test3', color: '#000000' //设置默认色, done: function (color) {$("#qrFGC").val(color);}}); });
</script></body>
</html>
引用的js:
引用的文件都给你了，是不是很给力！！！？？？？再来个更给力的，项目地址：QrCode
欢迎交流、留言，如果觉得有用，请点个赞吧
使用前端QrCode.js实现根据输入内容生成二维码，并提供二维码下载功能（已使用在交付项目中）相关推荐
- 汇编语言: 从键盘上输入一串字符（用回车键结束，使用 10 号功能调用。）放在 STRING 中，试 编制一个程序测试字符串中是否存在数字。如有，则把 CL 的第 5 位置 1，否则将该位置置 0。
从键盘上输入一串字符(用回车键结束,使用 10 号功能调用.)放在 STRING 中,试 编制一个程序测试字符串中是否存在数字.如有,则把 CL 的第 5 位置 1,否则将该位置置 0. data s ...
- 前端QRCode.js生成二维码（解决长字符串模块和报错问题）
QRCode 用法 1.使用npm安装到你的项目中 npm install qrcode2 --save 使用commonjs或者es6模块方式导入 var QRCode = require('qrc ...
- js实现判断输入内容是否为数字
有时候需要根据输入的内容来进行计算,这个时候就需要判断输入的内容是否是数字.JavaScript判断输入内容是否为数字的方法很多,接下来就来了解一下. 使用isNaN(x) 函数检查其参数是否是非数字 ...
- vue前端生成二维码并提供二维码下载
在一个管理后台的开发过程中使用到了需要前端自行生成分享二维码,并提供二维码下载功能,网上的解决方案很多,最终自己做完的思路和代码整理记录方便后续学习使用! vue版本为2.x 具体实现步骤: 下载安装 ...
- jquery.inputmask.js 输入框input输入内容格式限制插件
今天使用的就是这几行代码. 利用 jquery.inputmask.js 下载地址(如果打不开的话 请FQ http://plugins.jquery.com/jquery.inputmask/) ...
- 前端QRCode.js生成二维码插件
填报二维码生成 http://code.ciaoca.com/javascript/qrcode/demo/ git仓库地址 <el-table :data="scenicForm&q ...
- js正则检测输入内容为数字,包括负数,整数,浮点数,亲测可用.JS检测整数,js检测浮点数,js检测负数,js检测数字,js限制输入框只输入数字,解决H5 number类型只能输入正数问题.
JS 正则实现数字检测和限制输入,包括整数.浮点数.负数(亲测可用) 网上搜了一下,居然可以直接拿来用的很少,要么就是只能检测正整数.要么是只能检测浮点数,总之很多都不适合,而H5提供的type=&q ...
- 【JS】限制输入内容带特殊符号
限制文本输入时带一些特殊符号 1. 首先是实时获取Html中 <input> 输入的值 <!DOCTYPE html> <html><head>< ...
- js 根据所输内容生成助记码
js生成与中文字符串相对映的拼音首字母串 CreateTime--2017年7月14日16:35:31 Author:Marydon 需要工具js文件letter.js,代码如下: /** 作者:梅雪 ...
最新文章
- 数据库系统概论：第十章 数据库恢复技术
- Java内存模型的历史变迁
- 知道Python中的字符串是什么吗？
- 关于Tomcat5.5中EL表达式无效的解决办法
- [css] 有哪些方式可以对一个DOM设置它的CSS样式？
- java part part,java泛型指导手册（part1），指导手册part1
- 语音社交app源码，更改ProgressBar颜色(圈圈)
- Mysql的可视化工具整理
- Excel对比重复项
- 大觉山漂流，男人的欢笑女人的尖叫
- 人民币大小写转换格式
- 什么是Web？Web Service、Web API傻傻分不清楚？
- 微营销视频教程免费在线观看
- 记录一次清理挖矿程序
- Spring Boot 中使用 Hikari连接各类数据源
- 网站是不是php是什么意思,php网站是什么意思？
- 【参赛作品61】openGauss/MogDB大对象LargeObject存取测试
- 【SQLite关系型数据库】SQLite语法
- IT项目量化管理：细化、量化与图形化 与 中国IT项目实施困惑
- CentOS6.5环境 安装Keepalived和高可用服务相关参数说明