（Vue）前端获取头文件中的文件内容进行点击下载

一、需求

　　通过点击按钮下载后端接口头文件中的二进制流文件

二、实现

　　1、查看后台接口返回及头文件

  这里可以通过content-disposition获取文件名，因为他需要解码我不想太麻烦就直接写死了，想直接通过解码的方式获取文件名可通过以下方式。由于后台返回的文件是二进制流的形式所以我们看到的都是乱码，主要原因是服务器端和前端的编码格式不同，所以在发送请求的时候需要发送文件流接收格式给后端{responseType:'blob'}非常重要！！！，这样才能保证解析出来的文件内容不是乱码，blob文件类型参数可以参考头文件的content-type内容（直接照着用就好了），这里有个小细节，就是使用$axios.post()方式请求接口时一定要注意格式，否则可能导致解析失败。

let fileName = res.headers['content-disposition']
let regFileNames = decodeURI(fileName.match(/=(.*)$/)[1])

2.代码实现

 1 self.$axios
 2         .post('/business/containerOrder/exportInWarehouse/'+row.containerOrderId,{},{responseType:'blob'})
 3         .then(res=>{
 4           const fileName = "进仓单.docx"
 5           const blob = new Blob([res.data],{
 6             type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8',
 7           });
 8           //创建一个a标签并设置href属性，之后模拟人为点击下载文件
 9           let link = document.createElement('a');
10           link.href = window.URL.createObjectURL(blob);
11           link.download = fileName;//设置下载文件名
12           link.click();//模拟点击
13           //释放资源并删除创建的a标签
14           window.URL.revokeObjectURL(link.href);
15         })