前端post请求接收后台传来的二进制文件流blob实现下载功能,解决下载下来的文件打不开问题

下载文件的方法

onDownload(){
     download(params).then(res => {
         //注意:如果res是二进制流字符串而不是blob,则需要通过new Blob([res])转化成blob 
         var downloadElement = document.createElement('a');
         var href = window.URL.createObjectURL(res); //创建下载的链接
         downloadElement.href = href;
         downloadElement.download = '文件名'; //下载后文件名
         document.body.appendChild(downloadElement);
         downloadElement.style.display = 'none'
         downloadElement.click(); //点击下载
         document.body.removeChild(downloadElement); //下载完成移除元素
         window.URL.revokeObjectURL(href); //释放掉blob对象
     })
 }

还有一步非常重要!!!在请求接口时要设置responseType为blob

export const download = (params) => {
    return axios.post(url,params,{responseType:'blob'})
}

还有一点需要注意,如果项目中用到了mock,请求结果会被mock拦截,并且修改返回数据类型,这样就会出现下载下来的文件打不开。如下图:data的数据类型变成了字符串,request为MockXMLHttpRequest类型,这是因为被mock重写了
在这里插入图片描述

所以,需要把mock关掉,这样就好了
在这里插入图片描述

  • 8
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值