使用前端QrCode.js实现根据输入内容生成二维码，并提供二维码下载功能（已使用在交付项目中）

置顶 已于 2024-08-30 15:20:36 修改
阅读量1.5k 收藏 8
点赞数
分类专栏： 前端 文章标签： javascript vue.js css jquery html
于 2020-08-08 16:55:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38105536/article/details/107881621
版权

使用前端QrCode.js实现根据输入内容生成二维码

简介

  • 这是一个使用前端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].src
        document.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

引用的js
引用的文件都给你了，是不是很给力！！！？？？？

  • 再来个更给力的，项目地址：QrCode

  • 欢迎交流、留言，如果觉得有用，请点个赞吧

小七蒙恩
关注
专栏目录
qrcode.js生成二维码并下载
〆゛Care的博客
04-08 456
遇到的问题：下载二维码，使用js或jquery触发a标签的click无反应 操作过程 1. 页面引入js <script type="text/javascript" src="qrcode.js"></script> 2. 写一个div标签当做容器 <div id="qrcode"></div> 3. 生成二维码。 $('#qrcode').htm...
Python所有库的功能和用途整理，非常全面
lddnzx的博客
02-15 4735
只是对库的基本功能、用途进行了说明，具体使用方法需查找对应的help。 库名称简介 Chardet 字符编码探测器，可以自动检测文本、网页、xml的编码。 colorama 主要用来给文本添加各种颜色，并且非常简单易用。 Prettytable 主要用于在终端或浏览器端构建格式化的输出。 difflib，[Python]标准库，计算文本差异Levenshtein，快速计算字符串相似度。 fuzzy...
jquery.qrcode.js下载以及扫码登录实现
12-14
jquery.qrcode.js下载以及扫码登录实现,jquery.qrcode.js下载以及扫码登录实现,jquery.qrcode.js下载以及扫码登录实现
qrcode_download:将文字或链接生成二维码，并实现点击下载功能（纯js实现，简单快捷只要只要发布一个js库（该库源码地址github.comjeromeetiennejquery-qrcode））即可，在线预览http
03-23
生成二维码和生成下载链接的 关于qrcode第三方库的使用，可参照
qrcode生成二维码并下载
最新发布
smart_dream
07-29 331
1、中文乱码：query-qrcode这个库是采用 charCodeAt() 这个方式进行编码转换的，这个方法默认会获取它的 Unicode 编码，一般的解码器都是采用UTF-8, ISO-8859-1等方式。英文是没有问题，如果是中文，一般情况下Unicode是UTF-16实现，长度2位，而UTF-8编码是3位，这样二维码的编解码就不匹配了。2、qrcode.js生成的二维码是没有白边的，需要重新绘制带有边框的canva。
js生成二维码以及点击下载二维码
weixin_33928467的博客
12-30 374
js生成二维码 jquery.qrcode.js可以快速使用页面生成二维码。但改项目有两个小问题：1.不支持中文；2.不支持二维码中间生成图片。 支持中文的jquery-qrcode jquery.qrcode.js默认不支持中文。这跟js的机制有关系，jquery-qrcode这个库是采用 charCodeAt()这个方式进行编码转换的， 而这个方法默认会获取它的 Unicode 编码，一般的解...
前端使用qrcode.js生成二维码
zcbmwasd的博客
01-21 1899
qrcode.js生成二维码 1.引入qrcode.jsqrcode.js <script type="text/javascript" src="./qrcode.min.js"></script> 2.页面中盛放二维码的容器，以一个div为例 // 二维码中的信息 这里以自定义输入为例 具体看需求 <input name="text" id="text" value=""> // 给个id -- qrcode <div id="qrcode" style="w
前端使用QRCode.js生成二维码
一剑惊鸿影的博客
03-29 272
在前端项目中使用QRCode.js生成二维码功能 安装 npm install qrcodejs2 --save 并在项目内引入 import QRCode from ‘qrcodejs2’ <div class="qr" id="qrcode" ref="qrcode"> </div> // 生成二维码 createCode() { // document.getElementById('q
工程物资云平台_SaaS产品设计说明书（PRD）_施工企业工程项目物资材料管理软件系统
qq_39227629的博客
01-25 6266
本文章是关于施工企业工程项目物资管理云产品的PRD文档，也就是产品设计需求规格说明书。在此抛砖引玉，希望可以给大家带来好的思路与借鉴。 工程物资云产品是国内首个工程物资管理云平台，引领物资管理新模式。专注工程物资管理应用与创新，致力于服务企业数字化转型与信息化发展，是中国工程建筑业的SaaS服务领军企业，努力打造行业物联网、互联网应用平台。
所有的Python库，我都整理在这里了
kakA的博客
10-12 1197
加班加点整理出来的Python库，希望看到此篇文章的各位小伙伴，都可以学好Python~
架构经验：微商城生态解决方案
陈海龙的格物之路
12-09 3782
阐述了我实现微商城saas平台解决方案过程中的一些经验。
JS生成二维码还可选尺寸和下载
01-29
可自己输入内容生成二维码，并提供下载。还可以选择二维码的各种生成尺寸。自己可以根据自己的具体需求继续拓展此功能。
js将生成的二维码打包下载
02-22
这里和我上一个文档一样，也是生成二维码并下载的，但是这个是做成压缩包
html5与js生成二维码并下载到本地
09-12
通过网页根据用户的输入信息生成二维码，并下载到本地；文件包括:erweima.html，qrcode.js, jquery.js；支持中文生成二维码
二维码生成js包qrcode.js下载
08-31
qrcode包就是一个可以将字符串画出二维码的jquery包，这个里面包含了jquery1.8.3和qrcode以及jquery_qrcode包，在用的时候按照上面的顺序依次加载就可以了。调用方法qrcode()
JS生成二维码
12-30
JS生成二维码，兼容各种浏览器及手机端，支持中文。
severless 开发指南 q593393454
593393454的博客
05-03 2105
q593393454 q593393454 q593393454 q593393454 Serverless 架构应用开发指南 – serverless q593393454 code{white-space: pre-wrap;} span.smallcaps{font-variant: small-caps;} ...
js 生成二维码并点击下载
热门推荐
shibaweijin的博客
07-02 1万+
html 部分 <h1> 文字生成二维码及生成可下载的图片 </h1> <div><input id="input" value="http://www.baidu.com" type="text"><button type="button" onclick="refresh()">生出来</button></div> <div id="output"> <!--这里放canvas格式的二维
js生成二维码并下载
qq_36830736的博客
06-20 433
第一步： 网上下载jquery.qrcode.min.js 第二步： 引入二维码js 引入jquery 第三步： 写生成二维码的标签 例如：           //在这里生成二维码               //下载要用到     第四部: 写实现js         //生成二维码          $("#lcode").qrco
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小七蒙恩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值