前言：
本是一个非常简单的请求，即是下载文件。通常的做法如下：
1.前端通过Vue Axios向后端请求，同时在请求中设置响应体为Blob格式。
2.后端相应前端的请求，同时返回Blob格式的文件给到前端（如果没有步骤1设置响应体，则后端返回的是一个文件流，前端）
3.前端创建a标签进行下载
提示：如果后端返回的是文件的地址，那么前端可以直接通过window.location.href加文件路径即可下载文件。但是如果后台返回的是文件流，那么前端就需要做一些处理。处理的核心也是将文件流转成文件，然后使用a标签模拟点击下载。
找出问题 && 解决问题
我遇到的问题也是我想写篇文章记录一下的原因，因为下载文件这样的需求我都写烂了都，觉得这是得心应手的事情，在跟后端对接的时候，我非常坚定是后台返回流有问题（后面打脸了...）
这里我贴上我下载文件实现代码：
1.请求API
重点设置： responseType: 'blob'
2.封装的异步请求
3.调用接口，拿到返回值，模拟超链接点击下载文件
以上步骤似乎感觉是妥妥的了，但是我在自测的时候，一整个人蒙住，文件直接是打不开
然后我看控制台的输出，一看，不对劲啊，经过转换应该返回正常的blob格式才对，却是如下：
正式因为如此，导致下载下来的是一个无效的文件。
然后开始进一步的排查，代码都被我看烂了，也没看出来哪里会不对劲，各种百度也都试了，就是没有发现有什么问题。最后也是很突然的，我看到有个博主的文章，真的起到醍醐灌顶的作用，文章其中一句“mock模块会影响原生的ajax请求，使得服务器返回的blob类型变成乱码”，我才惊愕，因为我在项目中却是用到了mock，打开控制台发现，mockjs初始化的时候给拦截响应设置了responseType:''，证据如下：
终于找到原因了，同时把mock注释掉就可以了。真的是怎么也没有想到是mock模块影响了，可是花了好长一段时间去排查这个问题呢，解决了就好呀！！
下面是正常后拿到的数据格式：
优化
tip：我们可以把模拟a标签下载文件这个逻辑封装起来，如果后面又下载文件的需求的时候，可以直接拿来用即可。
1.封装：获取文件流转成文件，并模拟点击该文件，实现下载
2.使用文章来源：https://www.toymoban.com/news/detail-798995.html
文章来源地址https://www.toymoban.com/news/detail-798995.html
到了这里，关于前端下载文件流，设置返回值类型responseType:‘blob‘无效的问题的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
