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

前言：

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

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.使用