解决ie下动态添加canvas兼容性问题

解决ie下动态添加canvas兼容性问题

使用 Blob 和 msSaveBlob 以本地方式保存文件
用canvas动态生成的二维码，结果在ie下跑起来全错了，ie是不支持canvas的

情形一：在支持canvas 的浏览器下创建canvas

qroced 标签是生成二维码的标签，此功能是动态生成二维码，并且支持下载功能；利用的qrcode-vue插件
 //
    //
  let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
            let a = document.createElement('a');// 创建一个a标签
            let div = document.createElement('a').getElementsByTagName('span');
            a.href = myCanvas[0].toDataURL('image/png');// 设置属性，将canvas变成png图片
            a.download = '二维码下载';
            a.click();

情形二：在ie浏览器下，不会生效

let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
            let a = document.createElement('a');// 创建一个a标签
            let div = document.createElement('a').getElementsByTagName('span');
            a.href = myCanvas[0].toDataURL('image/png');// 设置属性，将canvas变成png图片
            console.log(a.href);
           // a.href 此时生成的是base64编码字符串
            const blob = this.convertBase64UrlToBlob(a.href);
            console.log(blob);
          // 利用window.navgator.msSaveBlob生成下载图片 ，两个参数，第一个是blob,第二个 
        是下载图片的名称和格式
            window.navigator.msSaveBlob(blob, '二维码下载.png');

利用已下函数转化

 convertBase64UrlToBlob (base64) {
       // 此时base64 是base64 字符串，前面已经转成data:image/png;base64格式，不用dataURL，
        console.log(base64);
        console.log(base64.dataURL);
        const parts = base64.split('base64,');
        const contentType = parts[0].split(':')[1];
        const raw = window.atob(parts[1]);
        const rawLength = raw.length;
        const uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; i++) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: contentType });
    }

如何区分浏览器类型

IEVersion() {
        // 判断是否是ie 浏览器
        // 取得浏览器的userAgent字符串
        var userAgent = navigator.userAgent;
        // 判断是否为小于IE11的浏览器
        var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
        // 判断是否为IE的Edge浏览器
        var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
        // 判断是否为IE11浏览器
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
        if (isLessIE11) {
            var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
            // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！
            IEReg.test(userAgent);
            // 取正则表达式中第一个小括号里匹配到的值
            var IEVersionNum = parseFloat(RegExp['$1']);
            if (IEVersionNum === 7) {
            // IE7
                return 7;
            } else if (IEVersionNum === 8) {
            // IE8
                return 8;
            } else if (IEVersionNum === 9) {
            // IE9
                return 9;
            } else if (IEVersionNum === 10) {
            // IE10
                return 10;
            } else {
            // IE版本<7
                return 6;
            }
        } else if (isEdge) {
        // edge
            return 'edge';
        } else if (isIE11) {
        // IE11
            return 11;
        } else {
        // 不是ie浏览器
            return -1;
        }
    }

完整代码片段

// html
   
      


//ts
   if (this.IEVersion() === -1) {
            let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
            let a = document.createElement('a');// 创建一个a标签
            let div = document.createElement('a').getElementsByTagName('span');
            a.href = myCanvas[0].toDataURL('image/png');// 设置属性，将canvas变成png图片
            a.download = '二维码下载';
            a.click();
        } else {
            let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
            let a = document.createElement('a');// 创建一个a标签
            let div = document.createElement('a').getElementsByTagName('span');
            a.href = myCanvas[0].toDataURL('image/png');// 设置属性，将canvas变成png图片
            console.log(a.href);
            const blob = this.convertBase64UrlToBlob(a.href);
            console.log(blob);
            window.navigator.msSaveBlob(blob, '二维码下载.png');
        }





 convertBase64UrlToBlob (base64) {
        console.log(base64);
        console.log(base64.dataURL);
        const parts = base64.split('base64,');
        const contentType = parts[0].split(':')[1];
        const raw = window.atob(parts[1]);
        const rawLength = raw.length;
        const uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; i++) {
            uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: contentType });
    }
    IEVersion() {
        // 判断是否是ie 浏览器
        // 取得浏览器的userAgent字符串
        var userAgent = navigator.userAgent;
        // 判断是否为小于IE11的浏览器
        var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
        // 判断是否为IE的Edge浏览器
        var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
        // 判断是否为IE11浏览器
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
        if (isLessIE11) {
            var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
            // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分，，这一步不可省略！！！
            IEReg.test(userAgent);
            // 取正则表达式中第一个小括号里匹配到的值
            var IEVersionNum = parseFloat(RegExp['$1']);
            if (IEVersionNum === 7) {
            // IE7
                return 7;
            } else if (IEVersionNum === 8) {
            // IE8
                return 8;
            } else if (IEVersionNum === 9) {
            // IE9
                return 9;
            } else if (IEVersionNum === 10) {
            // IE10
                return 10;
            } else {
            // IE版本<7
                return 6;
            }
        } else if (isEdge) {
        // edge
            return 'edge';
        } else if (isIE11) {
        // IE11
            return 11;
        } else {
        // 不是ie浏览器
            return -1;
        }
    }