下载文件功能(前端调用后台接口实现)

下载文件功能(前端调用后台接口实现)

  • 接口没有设置相关的token(有些接口设计中需要在请求头中设置headers: {
    ‘Content-Type’: ‘application/json;charset=utf-8’,
    Authorization: token,
    })
// get请求最简单的下载文件的方式
 window.location.herf = `https://app.convertwork.cn/_modeltag/valuemodel/createExcel?id=20`
  • 接口设置了相关的token,需要设置请求头时(或者下载文件的接口请求为POST方式)
// ajax请求使用axios,在请求头中设置
---------------------axios-----------------------------

let baseURL = `https://app.convertwork.cn/_modeltag/valuemodel/`
const MyAxios = axios.create({
  baseURL: baseURL,
  timeout: 10000,
  responseType: 'blob', // 注意responseType必须设置成blob
  headers: {
    'Content-Type': 'application/json;charset=utf-8',
    Authorization: token,
  },
});
---------------------axios-----------------------------

----------------------React----------------------------
// 事件触发
TriggerDownLoadFile = _DATA => {
    let params = {
      id: _DATA.id,
    };
    MyAxios.get('createExcel', { params:params }).then( res => {
	this.download(res.data, res.headers['content-disposition'])
})};

// 利用res.headers['content-disposition'],简单区分一下是CSV格式文件还是xlsx格式文件

download(data,type) {
    if (!data) {
      return;
    }
    let BLOB = new Blob([data]);
    let url = window.URL.createObjectURL(BLOB);
    let link = document.createElement('a');
    link.style.display = 'none';
    link.href = url;
    if (type.indexOf('csv')) {
      link.setAttribute('download', '分析文件.csv');
    } else {
      link.setAttribute('download', '分析文件.xlsx');
    }
    document.body.appendChild(link);
    link.click();
  }
----------------------React-------------------------

你可能感兴趣的:(文件下载)