【已解决】react或者vue中get/post下载文件(方法是react,vue同理)

1 公共方法 到时候直接引用就行

import { Button, message } from 'antd';
import React from 'react';
import httpUtils from '../../utils/FeatchUtils';
// 导出excel
/**
 *
 * @param api 导出的接口
 * @param params 当前的查询条件
 * @param fileName 导出的文件名（和后端确认文件扩展名是xls还是xlsx）
 * @param method 请求方式（默认get方式）
 * @param object 指向对象（接收传的this对象）
 * @param disabled 是否禁用
 * @param restProps 其余参数
 */
const exportButton = ({ api = '', params = {}, fileName = '未知文件名.xlsx',type='default', method = 'get', object, disabled = false, ...restProps }) => {
  return (
    <Button
      style={restProps.style || { marginLeft: 8 }}
      type={type}
      loading={object.state.exportButtonLoading}
      onClick={() => {
        handleClick(api, params, fileName, method, object);
      }}
      disabled={disabled}
    >
      导出
    </Button>
  );
};
const handleClick = (api,params,fileName,method,object)=>{
 object.setState({
   exportButtonLoading:true
 })
  if(method==='get'){
    httpUtils.getExport(api, params).then(res => {
      object.setState({
        exportButtonLoading:false
      })
      const content = res;
      const blob = new Blob([content]);
      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(err => {
        message.error(err);
      });
  }
  else{
    httpUtils.postExport(api, params).then(res => {
      object.setState({
        exportButtonLoading:false
      })
      const content = res;
      const blob = new Blob([content]);
      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(err => {
        message.error(err);
      });
  }


}

export default exportButton;

2 post/get方法   多余的可以自行去掉 不影响

import axios from 'axios';
import { message } from 'antd';
import { defaultPageSize,host }from '../../configs/DefaultConfig';
import { isLocalhost,cache,cacheSession } from "./CommonUtils";

const instance = axios.create({
    //当创建实例的时候配置默认配置
    xsrfCookieName: 'xsrf-token'
});

export function getHeader() {
    let authHeader=cache.get("authHeader")
    if(authHeader){
        return authHeader;
    }
    try {
        let auth = cacheSession.get('Authorization');
        authHeader = {
            'Content-Type':'application/json;charset=UTF-8',
            'Authorization': auth?(auth.accessToken?auth.accessToken:''):''
        }
    } catch (e) {
    }
    return authHeader;
}
instance.defaults.timeout = 100001

//添加请求拦截器
instance.interceptors.request.use(function(config){
    if(config.url.indexOf('ByPage')!==-1 && !config.params.page){
        config.params={'page':1,'rows':defaultPageSize,...config.params}
    }
    if(!isLocalhost && config.url.indexOf('http')===-1){
        config.url=host+config.url
    }
    return config;
},function(error){
    return Promise.reject(error);
});

//添加一个响应拦截器
instance.interceptors.response.use(function (response) {
    // 1.成功
    if (response.status===200) {
        return response.data;
    }
    // 3.其他失败，比如校验不通过等
    message.error(response.msg)
    return Promise.reject(response.data);
}, function (err) {
    if (err && err.response) {
        switch (err.response.status) {
            case 400: err.message = '请求错误(400)' ; break;
            case 401: err.message = '未授权，请重新登录(401)'; break;
            case 403: err.message = '拒绝访问(403)'; break;
            case 404: err.message = '请求出错(404)'; break;
            case 408: err.message = '请求超时(408)'; break;
            case 500: err.message = '服务器错误(500)'; break;
            case 501: err.message = '服务未实现(501)'; break;
            case 502: err.message = '网络错误(502)'; break;
            case 503: err.message = '服务不可用(503)'; break;
            case 504: err.message = '网络超时(504)'; break;
            case 505: err.message = 'HTTP版本不受支持(505)'; break;
            default: err.message = `连接出错(${err.response.status})!`;
        }
        if(err.response.status === 401){
            cache.clear('Authorization');
            cache.clear('Right');
            cache.clear('_s');
            cache.clear('authHeader');
            return;
        }
        if(err.response.data){
            err.message = err.message+"  "+err.response.data.msg
        }
    }else{
        err.message = '连接服务器失败!'
    }
    return Promise.reject({
        messageCode: err.message
    });
});

// 建立唯一的key值
function buildUrl (url, params = {}) {
    const sortedParams = Object.keys(params).sort().reduce((result, key) => {
      result[key] = params[key]
      return result
    }, {})

    url += `?${JSON.stringify(sortedParams)}`
    return url
  }

export default {
    get (url,param={},needCache=false) {
        let res;
        if(needCache){
            res = cache.get(buildUrl(url,param));
        }
        if(res){
            return new Promise((resolve,reject) => {
                resolve(res);
            });
        }else{
            return new Promise((resolve,reject) => {
                instance({
                    method: 'get',
                    headers: getHeader(),
                    url,
                    params: param
                }).then(res => {
                    if(needCache){
                        cache.set(buildUrl(url,param),res)
                    }
                    resolve(res)
                }).catch(err =>{
                    message.error(err.messageCode)
                    reject(err)
                })
            })
        }
    },
  getExport (url,param={}) {
      return new Promise((resolve,reject) => {
        instance({
          method: 'get',
          headers: getHeader(),
          url,
          responseType: 'blob',
          params: param
        }).then(res => {
          resolve(res)
        }).catch(err =>{
          message.error(err.messageCode)
          reject(err)
        })
      })

  },
    post (url,param={}) {
        return new Promise((resolve,reject) => {
            instance({
                method: 'post',
                headers: getHeader(),
                url,
                params: param,
            }).then(res => {
                resolve(res)
            }).catch(err =>{
                message.error(err.messageCode)
                reject(err)
            })
        })
    },

    postJson(url,data={}){
        return new Promise((resolve,reject) => {
            instance({
                method: 'post',
                headers: getHeader(),
                url,
                data: data,
                params:Date.parse(new Date()),
            }).then(res => {
                resolve(res)
            }).catch(err =>{
                message.error(err.messageCode)
                reject(err)
            })
        })
    },
  postExport(url,data={}){
        return new Promise((resolve,reject) => {
            instance({
                method: 'post',
                headers: getHeader(),
                 responseType: 'blob',//判断下载是否成功
                url,
                data: data,
            }).then(res => {
                resolve(res)
            }).catch(err =>{
                message.error(err.messageCode)
                reject(err)
            })
        })
    },
  postFormData(url,data={}){
    const  keys=  Object.keys(data);
    const  values=  Object.values(data);
      const formData=new FormData();
      keys.forEach((item,index)=>{
        formData.append(item,values[index])
      })
    return new Promise((resolve,reject) => {
      instance({
        method: 'post',
        headers: getHeader(),
        url,
        data: formData,
        params:Date.parse(new Date()),
      }).then(res => {
        resolve(res)
      }).catch(err =>{
        message.error(err.messageCode)
        reject(err)
      })
    })
  },
  delete (url,param={}) {
    return new Promise((resolve,reject) => {
      instance({
        method: 'delete',
        headers: getHeader(),
        url,
        params: param,
      }).then(res => {
        resolve(res)
      }).catch(err =>{
        message.error(err.messageCode)
        reject(err)
      })
    })
  },
  deleteBatch(url, param = {}) {
    return new Promise((resolve, reject) => {
      instance({
        method: 'delete',
        headers: getHeader(),
        url,
        data: param,
      }).then(res => {
        resolve(res)
      }).catch(err => {
        message.error(err.messageCode)
        reject(err)
      })
    })
  },
}