解決ie下動態(tài)添加canvas兼容性問題
使用 Blob 和 msSaveBlob 以本地方式保存文件
用canvas動態(tài)生成的二維碼，結(jié)果在ie下跑起來全錯了，ie是不支持canvas的
情形一：在支持canvas 的瀏覽器下創(chuàng)建canvas
qroced 標(biāo)簽是生成二維碼的標(biāo)簽，此功能是動態(tài)生成二維碼，并且支持下載功能；利用的qrcode-vue插件
//<qrcode-vue class="btn-wraps" ref="qrcode" id="qrcode" v-if="!imgJudge"
// :size="size"
// :value="http"
// :logo="logo"
// :bgColor="bgColor"
// :fgColor="fgColor">
//</qrcode-vue>
let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
let a = document.createElement('a');// 創(chuàng)建一個a標(biāo)簽
let div = document.createElement('a').getElementsByTagName('span');
a.href = myCanvas[0].toDataURL('image/png');// 設(shè)置屬性，將canvas變成png圖片
a.download = '二維碼下載';
a.click();
情形二：在ie瀏覽器下，不會生效
let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
let a = document.createElement('a');// 創(chuàng)建一個a標(biāo)簽
let div = document.createElement('a').getElementsByTagName('span');
a.href = myCanvas[0].toDataURL('image/png');// 設(shè)置屬性，將canvas變成png圖片
console.log(a.href);
// a.href 此時生成的是base64編碼字符串
const blob = this.convertBase64UrlToBlob(a.href);
console.log(blob);
// 利用window.navgator.msSaveBlob生成下載圖片 ，兩個參數(shù)，第一個是blob,第二個
是下載圖片的名稱和格式
window.navigator.msSaveBlob(blob, '二維碼下載.png');
利用已下函數(shù)轉(zhuǎn)化
convertBase64UrlToBlob (base64) {
// 此時base64 是base64 字符串，前面已經(jīng)轉(zhuǎn)成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 });
}
如何區(qū)分瀏覽器類型
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+);');
// 正則表達(dá)式匹配瀏覽器的userAgent字符串中MSIE后的數(shù)字部分，，這一步不可省略！??！
IEReg.test(userAgent);
// 取正則表達(dá)式中第一個小括號里匹配到的值
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
<qrcode-vue class="btn-wraps" ref="qrcode" id="qrcode" v-if="!imgJudge"
:size="size"
:value="http"
:logo="logo"
:bgColor="bgColor"
:fgColor="fgColor">
</qrcode-vue>
//ts
if (this.IEVersion() === -1) {
let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
let a = document.createElement('a');// 創(chuàng)建一個a標(biāo)簽
let div = document.createElement('a').getElementsByTagName('span');
a.href = myCanvas[0].toDataURL('image/png');// 設(shè)置屬性，將canvas變成png圖片
a.download = '二維碼下載';
a.click();
} else {
let myCanvas = (document.getElementById('qrcode') as any).getElementsByTagName('canvas');
let a = document.createElement('a');// 創(chuàng)建一個a標(biāo)簽
let div = document.createElement('a').getElementsByTagName('span');
a.href = myCanvas[0].toDataURL('image/png');// 設(shè)置屬性，將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+);');
// 正則表達(dá)式匹配瀏覽器的userAgent字符串中MSIE后的數(shù)字部分，，這一步不可省略！?。? IEReg.test(userAgent);
// 取正則表達(dá)式中第一個小括號里匹配到的值
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;
}
}
