一、JSP頁面

 <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程式碼

//生成二維碼
<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');
    }