前端下载 “不支持打开该类型文件或文件已损坏“问题

最开始做下载功能的时候，是模仿项目中已有的写法来实现的，这套模板应该可以适应大多数的下载，网上很多也是这种写法：

.then(res => {
	// res 为调用后端下载接口返回的值
	const blob = new Blob([res]);
	// 注意：文件类型不可少！当然也可以是其他类型比如 pdf，这取决于具体的文件。
	const fileName = 'xxx.png';		
	const elink = document.createElement("a");
	elink.download = fileName;
	elink.style.display = "none";
	elink.href = URL.createObjectURL(blob);
	document.body.appendChild(elink);
	elink.click();
	URL.revokeObjectURL(elink.href);
	document.body.removeChild(elink);
})

所以呢，就只管照着用了，直到搬到另一个项目的时候，发现出了问题，文件能正常下载，但是无法打开。比如下载 pdf 显示 “不支持打开该类型文件或文件已损坏”，下载图片则是无法查看。

怎么会呢，同样的写法，放到一个项目中可行，另一个项目就不行了？

查了半天资料，也没查出个所以然，直到我打印了 res，并且对比了两个项目中的 res，我才发现了原因，原因就出在返回结果 res！

A项目中可以直接使用res，是因为在 axios 中对后端的响应做了拦截，所以new Blob([res])中拿到的res实际上是后端接口的res.data，只不过这一层操作在全局被封装了。

但是 B 项目直接使用的$http.get().then()，并未在全局对请求进行封装拦截。所以在这里需要取得的是res.data

于是，我把new Blob([res])改成new Blob([res.data])后，问题就解决了。

---

以上便是关于这个问题的解决方案，特此记录一下，希望有帮到碰到同样问题的你。

如有错误之处，还望及时指正！😊