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)
      })
    })
  },
}