前端下载文件流
程序员文章站
2022-05-13 09:49:46
...
后端提供接口,直接返回一个文件,基本的请求方式如下
axios({
url,
method: 'POST',
params,
data,
headers: { 'ContentType': 'application/octet-stream;charset=uft-8;' },
responseType: 'blob'
})
具体地说明一下
-
method
,可以是post、get -
params
, 链接里的参数,根据接口需要来加入 -
data
, 请求body里的参数,根据接口需要来写 -
headers
, 请求的header,根据接口需要来写,octet-stream是未指定具体类型的stream -
responseType:'blob'
这个很重要,需要明确指定接口返回的类型。这样才能基于blob进行后续处理 -
response.headers[content-disposition]
一般接口返回时,会在返回的请求头上加上这个,在这里,会有文件名信息。
拿到请求返回的blob后,下载文件的代码实现
-
fileReader
实现
const reader = new FileReader()
reader.readAsDataURL(res.data)
reader.onload = function(e) {
DownFileByUrl(e.target.result, decodeURIComponent(res.fileName))
}
-
URL.createObjectUrl
方式
const URL = window.URL || window.webkitURL
const url = URL.createObjectURL(blob)
DownloadFileByUrl(url)
上一篇: 部署Django工程应该注意的问题
下一篇: 一些应该注意的问题