解决ie下动态添加canvas兼容性问题
使用 Blob 和 msSaveBlob 以本地方式保存文件
用canvas动态生成的二维码，结果在ie下跑起来全错了，ie是不支持canvas的
情形一：在支持canvas 的浏览器下创建canvas
qroced 标签是生成二维码的标签，此功能是动态生成二维码，并且支持下载功能；利用的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');// 创建一个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
<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');// 创建一个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;
}
}
网友评论