axios 异步下载获取文件类型(获取响应headers相关信息)

本文链接：https://blog.csdn.net/qq_29712303/article/details/105222061

本文详细介绍了如何使用异步请求进行文件下载，包括设置请求头、处理响应数据及根据不同文件类型进行适配的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我做的是异步请求下载文件，代码如下：

    /**
     * 下载文件
     */
    download_file(i){
      window.console.log(this.file_list_data[i].id);
      let that = this;
      this.$axios({
        method: 'get'
        ,url:url
        ,headers:{'token':localStorage.getItem('token'),'Content-Type': 'application/x-www-form-urlencoded'}
        
        ,responseType:'blob'
        ,params:{
          file:that.file_list_data[i].id,//携带请求数据
        }
      })
      .then(function (res) {
        if (res.status!=200) {
          //that.$Message.error("请求服务异常,请联系管理员:"+res.status);//请求失败提示
          return false;
        }
        window.console.log(res.headers)
        window.console.log('Content-Type:',res.headers['content-type'])
        /**
         * 下载的文件后缀
         */
        let file_type='';
        switch (res.headers['content-type']) {
          case 'application/pdf':
            file_type='.pdf';
            break;
          case 'image/jpeg':
            file_type='.jpg ';
            break;
          case 'image/gif':
            file_type='.gif ';
            break;
          case 'image/png':
            file_type='.png ';
            break;
          case 'application/x-zip-compressed':
            file_type='.zip ';
            break;
        
          default:
            return false;
            break;
        }
        
        const content = res.data
        const blob = new Blob([content])
        const fileName = that.file_list_data[i].name+file_type;
        if ('download' in document.createElement('a')) { // 非IE下载
          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) // 释放URL 对象
          document.body.removeChild(elink)
        } else { // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
      })

      .catch(function (error) {
        //that.$Message.error('请求服务异常');//异常提示
        window.console.log(error);
      });
    }

其中获取响应headers的是：

res.headers['content-type']//此处获取的是文件类型
//如果要获取其他的值将上述“''”内的值换为要获取的头标识，注意此处获取 key需全小写