【Java】生成JS二维码

最新推荐文章于 2025-07-08 21:28:07 发布

冯浩月

最新推荐文章于 2025-07-08 21:28:07 发布

阅读量487

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Java

本文链接：https://blog.youkuaiyun.com/m18633778874/article/details/82777834

Java 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个使用JSP和JS插件生成购卡二维码的过程。通过添加按钮和div、img标签，利用jquery.qrcode.min.js生成二维码，并用layer.js展示和提供下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

小编最近在公司遇到一个新的需求，需要生成一个二维码，我们项目经理并给出了实现的思路，主要是JSP添加一个控件，js里面写实现的方法即可，关键点是使用两个js插件。

内容

一、JSP页面

1.添加一个按钮

 <shiro:hasPermission name="memshop:csold:recomd">
        {{if ifShelves==1}}
           <input type="button"  class="gray_btn fl twocodebtn" cardcode="{{:cardCode}}" cinemacode="{{:cinemaCode}}" companycode="{{:companyCode}}" cinemaShortName="{{:cinemaShortName}}" cardName="{{:cardName}}" value="购卡二维码">
         {{/if}}
 </shiro:hasPermission>

2.添加div、img标签接收二维码

<div id="qrcodeDiv"></div>
<img id='qrcodeimg' style='border:1px;'/>

二、js代码

1.引用两个js插件（在jsp页面引用）

//生成二维码
<script src="${ctx}/js/lib/jquery.qrcode.min.js"></script>
//弹出层
<script src="${ctx}/js/lib/layer/layer.js"></script>

2.代码实现

  // 购卡二维码
    $("#pricetabl").on("click", ".twocodebtn", function () {
        //传递必要参数（本功能需要）
        var cinemaCode = $(this).attr("cinemacode");
        var cardCode = $(this).attr("cardcode");
        var companyCode=$(this).attr("companycode");
        var cinemaShortName=$(this).attr("cinemaShortName");
        var cardName=$(this).attr("cardName");
       //二维码指向的地址
        var url="https://newh5.ingcore.com/app/card/cardDetail?companyCode="+companyCode+"&cinemaCode="+cinemaCode+"&cardCode="+cardCode;
        qrcode(url,cinemaShortName,cardName);

        });



    //生成二维码的方法
    function qrcode(url,cinemaShortName,cardName){
        var qrcode= $('#qrcodeDiv').qrcode(url).hide();
        var canvas=qrcode.find('canvas').get(0);
        $('#qrcodeimg').attr('src',canvas.toDataURL('image/jpg')).hide();       
        
        //layer的模板方法
        layer.open({
            type: 1,
            skin: 'layui-layer-molv', //样式类名
            title: ['购卡二维码（'+cinemaShortName+"-"+cardName+"）", 'font-size: 10px; '],
            offset: 'auto',
            area:'auto' , //宽高
            resize:true,
            closeBtn: 1, //显示关闭按钮
            shade: 0,
            anim: 0,
            shadeClose: true, //开启遮罩关闭
            content: $("#qrcodeimg")
            ,btn: ['下载二维码']
            ,yes: function(index, layero){
                var url = canvas.toDataURL('image/jpg');
                var a = document.createElement('a');
                var event = new MouseEvent('click');
                a.download =  '购卡二维码（'+cinemaShortName+"-"+cardName+"）"
                a.href = url;
                a.dispatchEvent(event);
             }
             ,btnAlign: 'r'
             });
              $(".layui-layer-content").css('margin','18px 18px');
    }

小结

在实现这个功能的时候，自己是边做边修改，多是一些样式的调整，通过这个过程，自己对于css的操作进一步熟悉，同时也要注意变量的命名规范，不要简写，尽量写出单词全称。 感谢您的访问！