Javascript前端下载后台传来的文件流代码实例
程序员文章站
2022-05-21 18:27:54
前台请求数据:url: '/app/downloadapp', method: 'get', responsetype: 'blob', params: data设置接收参数格式为responsety...
前台请求数据:
url: '/app/downloadapp', method: 'get', responsetype: 'blob', params: data
设置接收参数格式为responsetype: ‘blob',
downloadfile(res, filename) { if (!res) { return } if (window.navigator.mssaveblob) { // ie以及ie内核的浏览器 try { window.navigator.mssaveblob(res, filename) // res为接口返回数据,这里请求的时候已经处理了,如果没处理需要在此之前自行处理var data = new blob([res.data]) 注意这里需要是数组形式的,filename就是下载之后的文件名 // window.navigator.mssaveoropenblob(res, filename); //此方法类似上面的方法,区别可自行百度 } catch (e) { console.log(e) } } else { let url = window.url.createobjecturl(new blob([res])) let link = document.createelement('a') link.style.display = 'none' link.href = url link.setattribute('download', filename)// 文件名 document.body.appendchild(link) link.click() document.body.removechild(link) // 下载完成移除元素 window.url.revokeobjecturl(url) // 释放掉blob对象 } }, download(){ var data = { appid:this.appid } downloadappajax(data).then(res => { const filename = decodeuri(res.headers['content-disposition'].split(';')[1].split('=')[1]); console.log(filename) this.downloadfile(res.data,filename) }) }
这里的downloadappajax调用后台接口,请求数据,获取后台返回的数据没有文件名,最后发现在header content-disposition属性里 attachment;filename=app.jpg
所以我们要实现下载自动重命名就需要拿出filename,这里我们使用decodeuri对content-disposition属性值进行解码,拿到filename:
decodeuri(res.headers['content-disposition'].split(';')[1].split('=')[1]);
拿到文件流和文件名后 接收文件流并创建地址
let url =window.url.createobjecturl(new blob([res]))
接着利用a标签进行下载即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 256MB大容量显存利弊谈
下一篇: 显卡的构造工作原理