文章目录

二维码插件qrcode：

JS逻辑实现：

 <!-- 二维码插件，qrcode.min.js下载请百度搜索即可 -->
 <script type="text/javascript" src="../js/qrcode.min.js"></script>
 
 <script type="text/javascript">
     //主函数，所有的页面写js一上来都要写主函数
     //在js中{}代表对象
     var qrcode;//全局变量
     window.onload = function() {
   
         //不能写localhost，要写真是的ip地址
         //你的项目在你的电脑上，你的微信在你的手机
         //要保证你的电脑和你的手机用的是同一个局域网
         //创建局域网：手机热点，电脑连接
         //再使用ipconfig查询ip地址，填入
         qrcode = new QRCode(document.getElementById("qrcode"), {
   
             text : "http://192.168.46.218:8080/hpl/main.html?uid=56",
             width : 128, //生成的二维码的宽度
             height : 128,//生成的二维码的高度
             colorDark : "#0000ff", // 生成二维码的深色部分
             colorLight : "#ffffff", //生成二维码的浅色部分
             correctLevel : QRCode.CorrectLevel.H
         });
     }
 
     function download(qrcodeUrl, qrcodeName) {
   
         qrcode.clear();//清空之前生成的二维码，之前的不要了
         qrcode.makeCode(qrcodeUrl);//重新生成新的二维码
         //因为生成二维码是一个算法执行过程，需要消耗一定的时间
         setTimeout(function() {
   //回调函数：等待100ms
             //实现下载过程，使用a标签下载
             //但二维码手机动态生成的，需要在点击a标签之前
             var img = document.getElementById('qrcode').getElementsByTagName(
                     'img')[0];
             //alert(img);
             //使用canvas画布进行转换，得到href的网址
             var canvas = document.createElement('canvas');
             canvas.width = img.width;
             canvas.height = img.height;//画布的宽度和高度=二维码图片的宽度和高度
             canvas.getContext('2d').drawImage(img, 0, 0);//在画布的左上顶点进行画画，画二维码图片
             var url = canvas.toDataURL('image/png');//通过画布得到所画图片的路径
             //alert(url);
             var a = document.getElementById('download');
             a.setAttribute('href', url);
             a.setAttribute('download', qrcodeName + '二维码.png');//下载的图片改名
             a.click();//使用js触发a标签的点击事件
         }, 100);//等待100ms
 
     }
 </script>

html展示与下载调用部分：

<!-- style="display: none"表示二维码不展示，我们需要二维码时需要去除该属性 -->
 <div id="qrcode" style="display: none"></div>  
 
 <!-- 下载二维码，注意传入的分别为qrcodeUrl, qrcodeName表示二维码打开链接与二维码下载名称 -->
 <a class="btn btn-default btn-xs"
     href="javascript:download('http://192.168.46.218:8080/hpl/user/detail?id=${bean.id }','${bean.username }')">详情</a>

图片信息展示如下：