后端返回数据流或者base64时,前端需要转为图片下载,这个时候就要用到a标签
a标签下载常规做法:
var a = document.createElement('a') // 先创建a标签
a.href = base // base是后端返回的数据
· a.download = '下载.jpg' // 下载的图片名
a.click(); // 开始下载
这样做完发现在IE里没有反应,原因是IE不支持a标签的download 属性,IE需要用到msSaveBlob方法
a标签下载兼容IE做法:
var a = document.createElement('a') // 先创建a标签
a.href = blob // base是后端返回的数据
· a.download = '下载.jpg' // 下载的图片名
if (navigator.msSaveBlob) {
// 兼容IE
var blob = Blob([blob], { type: 'image/jpg'});
return navigator.msSaveBlob(blob, '月报报表.jpg');
}
a.click(); // 开始下载
在火狐发现也是不能下载,原因是body里没有a标签,解决的方法就是把创建的a标签添加到body里
兼容性所有浏览器的写法就是:
var a = document.createElement('a') // 先创建a标签
document.body.appendChild(a);
a.style.display='none';
a.href = blob // base是后端返回的数据
· a.download = '下载.jpg' // 下载的图片名
if (navigator.msSaveBlob) {
// 兼容IE
var blob = Blob([blob], { type: 'image/jpg'});
return navigator.msSaveBlob(blob, '月报报表.jpg');
}
a.click(); // 开始下载