笔记-js异步下载文件
栏目: JavaScript · 发布时间: 5年前
内容简介:之前因为懒,异步请求的下载都是直接写在a标签里,请求权限让后端做特殊处理判断,就像这样现在觉得这样处理不太好,一个是后端权限要做单独判断,另一个是如果调用接口报错就没办法处理了,研究之后修改了一下,项目用了axios这个lib,所以是针对axios的request和response做了修改,不过对于原生写法和其他库,原理是一样的因为项目里用了response拦截器来处理响应,所以我在拦截器里做了处理,也可以单独处理。
之前因为懒,异步请求的下载都是直接写在a标签里,请求权限让后端做特殊处理判断,就像这样
<a href="getRequestUrl">点击下载</a>
现在觉得这样处理不太好,一个是后端权限要做单独判断,另一个是如果调用接口报错就没办法处理了,研究之后修改了一下,项目用了axios这个lib,所以是针对axios的request和response做了修改,不过对于原生写法和其他库,原理是一样的
1.将请求的responseType设置为blob
function exportData(p) { axios({ url: '/data/export', method: 'get', params: p, responseType: 'blob' }); }
2.对response进行处理
因为项目里用了response拦截器来处理响应,所以我在拦截器里做了处理,也可以单独处理。
axios.interceptors.response.use( response=> { // ... // Blob类型处理 let checkType = response.config.responseType; if(checkType === "blob" && res.type === 'application/octet-stream') { // 正常下载时直接返回响应数据 return response.data } else if(checkType === "blob" && res.type === 'application/json') { // 请求出错时,接口返回的内容是json,于是将blob中的内容取出 let reader = new FileReader(); reader.onload = function(event){ let content = reader.result; // blob中的内容 Message({ message: JSON.parse(content).desc, type: 'error', duration: 5 * 1000 }) }; reader.readAsText(response.data); return Promise.reject('error') } // ... }, error => { // ... } )
3.html页面自动开始下载
exportData(para).then(res => { let content = res; let aTag = document.createElement('a'); let blob = new Blob([content]); aTag.download = 'Datas.xlsx'; // 也可以让后端设置文件名,通过headers返回 aTag.href = URL.createObjectURL(blob); aTag.click(); URL.revokeObjectURL(blob); }).finally(() => { })
以上所述就是小编给大家介绍的《笔记-js异步下载文件》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 文件系统与异步操作——异步IO那些破事
- Html5实现文件异步上传
- Html5实现文件异步上传
- ThinkPHP+JQuery实现文件的异步上传
- Android 中实现异步轮询上传文件
- [Flutter必备]-Dart中的异步与文件操作全面解析
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Python灰帽子
[美] Justin Seitz / 丁赟卿 译、崔孝晨 审校 / 电子工业出版社 / 2011-3 / 39.00元
《Python灰帽子》是由知名安全机构Immunity Inc的资深黑帽Justin Seitz主笔撰写的一本关于编程语言Python如何被广泛应用于黑客与逆向工程领域的书籍。老牌黑客,同时也是Immunity Inc的创始人兼首席技术执行官(CTO)Dave Aitel为这本书担任了技术编辑一职。书中绝大部分篇幅着眼于黑客技术领域中的两大经久不衰的话题:逆向工程与漏洞挖掘,并向读者呈现了几乎每个......一起来看看 《Python灰帽子》 这本书的介绍吧!