关于前端导出文件打不开的问题

关于前端导出文件打不开的问题

前言：不知道小伙伴们在开发当中有没有遇到这样的问题，业务需求是需要导出一个文件，后端会返回回来一个文件流，然后我们需要将其处理成为一个文件类型，常用的是导出excel文件。

如果在百度上一搜会发现其实很简单，思路大概是这样的

文件流
|
Blob类型
|
URL
|
创建a标签
|
指定href为URL
|
设置download属性来指定文件名

代码大概是这样的。

const downloadDoc = function(content, filename) { 
    let a= document.createElement('a'); 
    a.download = filename; 
    a.style.display = 'none'; 
    let blob = new Blob([content]); 
    a.href = URL.createObjectURL(blob); 
    document.body.appendChild(a); 
    a.click(); 
    document.body.removeChild(a); 
}; 

大家都知道在默认情况下我们从后端拿到的是一个个类似乱码的一个文件流，实际上这个文件流是二进制数据流。就像下面这个一样。

而我今天犯的一个错误就是直接把这个二进制数据流传入这个中了，虽说代码也能继续走，也能下载文件，好像成功了但是发现文件是打不开的，原因其实出在content上

我们可以查阅一下Blob类型的文档

要显示的创建一个blob类型，那么array必须是ArrayBuffer, ArrayBufferView, Blob, DOMString 其中的某一个，而今天我看了一下返回的类型是一个application/x-xls;charset=utf-8;所以不符合以上任意一种类型，所以此处转换失败了，就打不开了。

经过一顿百度，加上看看之前的代码，发现忘了添加responseType为blob了，然后赶紧加上，但是发现还是不行。

最后发现是自己加错位置了。

在这个我要提醒各位的是，responseType设置为blob类型时返回回来的就不是一堆乱码的数据流了，而是一个{ type:Blob,size:11111 }，类似于这样的，而且responseType添加成功后，并不会显示的体现在请求头之中，我以前一直以为这个属性是体现在请求头中的，可能是受Content-Type的影响了叭，在使用axios发送请求时，千万不能往headers里面添加这个，否则造成的后果就是，请求头里面明明是有responseType:'blob’属性，你感觉你添加成功了，但是它就是不生效，我今天就是这个问题卡了我好久，然后看了一个axios配置才知道，加错位置了。

使用axios发送请求时，responseType是在headers之外的，这个一定要注意。我今天兴致勃勃的加在了headers里面，然后就不生效了，最后检查了一下才看出来。

保证一下几个点，responseType加对位置，第二保证new Blob()接受的是一个blob类型或者arrayBuffer类型，然后再使用那一段代码，那就一定没有问题。