在前端页面生成二维码并下载（兼容IE）

做项目的过程中遇到一个需求：把每个果树都生成一个对应的二维码，然后点击下载。

---

大致的思路是：用canvas画出二维码，然后把二维码转换成base64图片，然后点击下载……（这个过程中IE的兼容有点儿折磨人……）

---

1、先写HTML结构：

---

 

     

//画二维码的地方

     //点击下载按钮后给a标签添加href属性并立即click()调用点击下载

     点击下载

---

2、再写相应的js

---

在写之前记得先引入qrcode.min.js

//实例化一个二维码

var qrcode = new QRCode(document.getElementById("qrcode"),{

text:'http://www.……'+fruitid,//此行为扫描二维码之后跳转的网址

width:128,//生成的二维码宽度

height:128,//生成的二维码高度

colorDark:"#000000",//生成二维码的深色部分

colorLight:"#ffffff".//生成二维码的浅色部分

correctLevel:QRCode.CorrectLevel.H

});

---

//判断浏览器类型

//判断浏览器类型
        function myBrowser(){
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return "Opera"
            }; //判断是否Opera浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return "FF";
            } //判断是否Firefox浏览器
            if (userAgent.indexOf("Chrome") > -1){
                return "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return "Safari";
            } //判断是否Safari浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return "IE";
            }; //判断是否IE浏览器
            if (userAgent.indexOf("Trident") > -1) {
                return "Edge";
            } //判断是否Edge浏览器
        };

 

---

//点击下载按钮时执行的操作

$("#save").click(function(){

var canvas = $('#qrcode').find("canvas").get(0);//取到canvas

var url = canvas.toDataURL('image/jpeg');//把canvas转换成base64

myBrowser();//判断浏览器类型

if(myBrowser()==="IE"||myBrowser()==="Edge"){

     var blob = canvas.msToBlob();

     window.navigator.msSaveBlob(blob,a+'.png');

}else{

    $('#download').attr({href:url,download:a}).get(0).click();

}

}) 

---

3、总结一下页面上实现二维码下载的方法（分为IE浏览器和非IE浏览器）

IE浏览器：创建blob对象

                 var blob = canvas.msToBlob();

                 window.navigator.msSaveBlob(blob,下载的文件名+'.png');

非IE浏览器：给a标签添加href属性和download属性，然后直接点击下载

                  其中href属性指向要下载的图片的URL（如果是canvas，则是canvas转换为base64的地址）；

                   download属性用来设置下载图片的名字；

比如：$("#download").attr({href:url,download:a}).get(0).click();