前端接收二进制文件流,并通过浏览器下载文件

前端接收二进制文件流,并通过浏览器下载文件

As known,用blob来接收并解析二进制流。

new Blob的时候入参两个,第一个是二进制字符串的数组,专业来说是一个由 ArrayBuffer,ArrayBufferView,Blob,DOMString 等对象构成的数组,第二个是可选对象,包含type(默认为“”,代表数组的MIME类型)和endings(不常用)。其中type应和后端返回接口的content-type一致(type: “application/json”)
在请求接口的时候需要使用原生axios, 才能正确设置responseType为blob,不然是无法解析的

axios({
          url:``,
          data:  {addServiceType: this.serviceType},
          headers:{
            Authorization: window.localStorage.getItem('Authorization')
          },
          responseType: 'blob',
          method:'post'
        })
        .then((res) => {
            let b = new Blob([res.data], { type: "application/json" }); 
            let url = window.URL.createObjectURL(b);  //生成文件流下载链接
            let a = document.createElement('a')
            a.download = 'sheet.xls'
            a.href = url
            a.click()
          })
          ```
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值