本文注意2点:1. URL的derevokeObjectURL方法 2 .如何给后台下载的文件重命名 ,3.blob对象的使用

50 篇文章 0 订阅

知识点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中已经亲自测试过)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值