axios POST方式下载文件乱码解决以及浏览器兼容

本文介绍了在使用axios进行POST请求下载文件时遇到的乱码问题,重点讲解如何通过设置responseType为blob并利用Blob对象处理返回内容来解决。同时提到了Mock数据可能对responseType的影响,以及在Firefox浏览器(特别是Windows和Linux系统)上的兼容性处理。
摘要由CSDN通过智能技术生成

通过Blob对象处理返回内容

先设置responseType为blob,对象随后对返回的数据进行Blob处理,再创建a标签模拟点击下载。

值得注意的是,如果你的项目中使用了mock数据,那么会覆盖你的responseType的设置为默认的json,使得下载文件内容乱码。因此,你需要密切关注返回的数据是个Blob对象还是Json格式
具体代码如下

axios({
              method:'post',
              url:'',
              responseType: "blob",   // 该项必填
              data:{}
            }).then(res=>{         
              const blob = new Blob([res.data], {
          	    type:
                "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
            });
            const downloadElement = document.createElement("a");
            const href = window.URL.createObjectURL(blob);
            // 如果后端没有提供文件名不用管下面注释的代码
            // let contentDisposition = res.headers["content-disposition"]; //从response的headers中获取filename, 后端response.setHeader(&#
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值