兼容ie的下载方法
在平时开发用的是谷歌浏览器,突然要兼容ie10以上,这时候我发现我原来的处理下载文件的方法在ie报错了。报错信息如下:
折腾了一下午,最后发现是我草率了。
navigator.msSaveBlob()方法将文件或Blob保存到磁盘。此方法的行为方式与navigator.msSaveOrOpenBlob()相同,只是禁用了文件打开选项。
直接在我的下载方法后加入判断,优先使用此方法即可解决ie报错的问题了
具体代码如下:
exportFile(url, method = "get", params = {}, data) {
return new Promise((resolve, reject) => {
service({
url: url,
method: method,
params: params,
data: data,
responseType: "blob",
headers: {
'Content-Type': 'application/json'
},
})
.then(res => {
resolve();
if (res) {
console.log(res);
let fileName = res.headers['content-disposition'];
let name = decodeURI(
fileName
.split("=")[1]
.replace('"', "")
.split(".")[0]
);
let format = decodeURI(
fileName
.split("=")[1]
.replace('"', "")
.split(".")[1]
.replace('"', "")
);
var blob = res.data;
// 兼容ie
if (window.navigator.msSaveBlob) {
try {
window.navigator.msSaveBlob(blob, name + '.' + format)
} catch (e) {
console.log(e);
}
} else {
// 其他浏览器,创建一个a链接点击下载
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
var a = document.createElement("a");
a.download = name + '.' + format;
a.href = e.target.result;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
}
} else {
reject();
}
})
.catch(err => {
reject(err);
})
})
}