知识点1【revokeObjectURL】: URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
使用场景示例:下面代码是一个文件下载的功能,做了一个请求,服务器返回文件对象。
知识点2【如何给后台下载的文件重命名】:但没有和以前的文件下载一样:以前文件下载只要给个下载地址,我们使用1. 标签加href=“下载的url”点击就可以,2.或者使用window.open(“下载的url”), 这里它做了一步转换,把请求回来的文件,生成了blob对象,并生成了可以访问blob对象的url,再创建标签加href=“下载的url”点击,其实最终它这么做的目的是为了给下载的文件file重命名,
return axiosInstance[type](url,data).then((result) => {
//console.log(result.data)//打印出来是个二进制数据缓冲区,字节大小为31923:ArrayBuffer(31923)
//创建blob对象,第一个参数是传入数组,数组中的每项元素可以是ArrayBuffer(二进制数据缓冲区),Blob,String。或其 他类似对象的混合体,
//第二个参数传入数组内容的MIME类型
const blob = new Blob([result.data],{type:'application/msexcel'});
const href = window.URL.createObjectURL(blob);
const a = document.createElement('a'); //通过$(a)来打印查看a标签dom对象的属性。
if('download' in a){//非ie
a.href = href;
a.style.display = 'none';
fileName && (a.download = fileName);//注意点1:a.download重命名方法
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.URL.revokeObjectURL(href);//注意点2://出于安全机制与性能考虑主动释放这个缓存
}
else if(window.navigator.msSaveBlob){
window.navigator.msSaveBlob(blob,fileName);
}
})
总结:1.a.download重命名下载文件
2.这里使用blob对象转一遍的真正目的
3.window.open(mainUrl+url)//这种方法在任何浏览器都可以,但在ie中有所却别,需要手动选择文件夹。,并且这种方式无法改变下载的文件名称。
4. 给a标签加href与点击事件,下载文件,只在非ie的情况下适用,在ie中是不起作用的。(我在ie中已经亲自测试过)