前端下载文件流

后端提供接口,直接返回一个文件,基本的请求方式如下

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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值