前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题

前言:

本是一个非常简单的请求,即是下载文件。通常的做法如下:

1.前端通过Vue Axios向后端请求,同时在请求中设置响应体为Blob格式。

2.后端相应前端的请求,同时返回Blob格式的文件给到前端(如果没有步骤1设置响应体,则后端返回的是一个文件流,前端)

3.前端创建a标签进行下载

提示:如果后端返回的是文件的地址,那么前端可以直接通过window.location.href加文件路径即可下载文件。但是如果后台返回的是文件流,那么前端就需要做一些处理。处理的核心也是将文件流转成文件,然后使用a标签模拟点击下载。

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第1张图片

找出问题 && 解决问题

我遇到的问题也是我想写篇文章记录一下的原因,因为下载文件这样的需求我都写烂了都,觉得这是得心应手的事情,在跟后端对接的时候,我非常坚定是后台返回流有问题(后面打脸了...)

这里我贴上我下载文件实现代码:

1.请求API

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第2张图片

重点设置: responseType: 'blob' 

2.封装的异步请求

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第3张图片

3.调用接口,拿到返回值,模拟超链接点击下载文件

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第4张图片

以上步骤似乎感觉是妥妥的了,但是我在自测的时候,一整个人蒙住,文件直接是打不开

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第5张图片

然后我看控制台的输出,一看,不对劲啊,经过转换应该返回正常的blob格式才对,却是如下:

正式因为如此,导致下载下来的是一个无效的文件。

然后开始进一步的排查,代码都被我看烂了,也没看出来哪里会不对劲,各种百度也都试了,就是没有发现有什么问题。最后也是很突然的,我看到有个博主的文章,真的起到醍醐灌顶的作用,文章其中一句“mock模块会影响原生的ajax请求,使得服务器返回的blob类型变成乱码”,我才惊愕,因为我在项目中却是用到了mock,打开控制台发现,mockjs初始化的时候给拦截响应设置了responseType:'',证据如下:

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第6张图片

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第7张图片

 终于找到原因了,同时把mock注释掉就可以了。真的是怎么也没有想到是mock模块影响了,可是花了好长一段时间去排查这个问题呢,解决了就好呀!!

下面是正常后拿到的数据格式:

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第8张图片

优化

tip:我们可以把模拟a标签下载文件这个逻辑封装起来,如果后面又下载文件的需求的时候,可以直接拿来用即可。

1.封装:获取文件流转成文件,并模拟点击该文件,实现下载

​​​​​​​前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第9张图片

2.使用

前端下载文件流,设置返回值类型responseType:‘blob‘无效的问题_第10张图片

你可能感兴趣的:(前端)