Vue 下载文件需要token设置

平时下载文件访问后台给的下载链接点击自动下载即可，因文件需要验证身份信息，所以需要在Request headers中塞入token作为身份验证

既然链接直接打开不行，那就只能通过ajax访问的时候设置Request headers

请求数据格式设置成文件流，请求中添加 responseType: 'blob'

export function filedown() {
    return request({
        url:'.............',
        method:'get',
        responseType: 'blob',
        headers:{
            'Content-Type':'application/json',
        }
    })
}

ajax访问成功以后，返回的并不是我们想要直接下载的结果，返回的直接是文本内容，并且没有触发下载，例如

 

既然文件已经能访问到了，那就手动下载吧，

/*
 1 ajax文件格式是.text，下载用的是Blob文件流,所以手动修改请求的responseType的返回格式类型
*/
//JS 获取到Blob格式文件后下载方法，Blob格式在下面

const link = document.createElement('a');  // 创建元素
let blob = new Blob([res.data]);  
link.style.display = 'none';
link.href = URL.createObjectURL(blob);   // 创建下载的链接
link.setAttribute('download',  fileName+'.'+type);  // 给下载后的文件命名 fileName文件名  type文件格式
document.body.appendChild(link);
link.click();  // 点击下载
document.body.removeChild(link);  //  下载完成移除元素
window.URL.revokeObjectURL(link.href);  // 释放掉blob对象

基本上这样就结束了，但是！如果他没有权限呢？这个时候你文件返回的格式是Blob文件流，是看不到报错信息的，并且会执行下载，但是空文件甚至报错

这个时候就要把Blob文件流转换成字符串，再去判断需不需要执行文件下载或者提示登录信息之类的，整合以后如下

/*
 文件请求返回数据格式为Blob --- responseType: 'blob',

 JS ---获取到blob格式文件后的操作
 fileName --文件名
 type --下载文件格式
*/

downFile(fileId,fileName,type){
  filedown(fileId).then(res =>{
    var reader = new FileReader();
    let that = this
    reader.onloadend = function(event){
      //event 就是你要的返回内容
      //因为返回的报错格式是字符串，手动转换成对象，转换成功表示请求失败
      //转换失败就意味着你拿到的result是文件流，那么直接手动下载就好
      try{
        let data = JSON.parse(event.target.result)
        that.$message.error("请点击右上角登录后重新下载");
      }catch(err){
         const link = document.createElement('a');  // 创建a标签
         let blob = new Blob([res.data]);     
         link.style.display = 'none';
         link.href = URL.createObjectURL(blob);   // 创建下载的链接
         link.setAttribute('download',  fileName+'.'+type);  // 给下载后的文件命名
         document.body.appendChild(link);
         link.click();  // 点击下载
         document.body.removeChild(link);  //  完成移除元素
         window.URL.revokeObjectURL(link.href);  // 释放blob对象
       }
    };
    reader.readAsText(res.data);
  })
})