前端POST请求下载文件

前端POST请求下载文件功能

• 下载接口没有设置权限-（例如：token，有些接口设计中需要在请求头中设置headers: {
  “Content-Type”: ‘application/json;charset=utf-8’,
  “Authorization”: token,
  }）

// get请求最简单的下载文件的方式
location.herf = `https://xxxxxx.com/_modeltag/valuemodel/createExcel?id=20`

• 接口设置了相关的token，需要设置请求头时（或者下载文件的接口请求为POST方式）

// ajax请求使用axios，在请求头中设置
---------------------axios-----------------------------

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

----------------------React----------------------------
// 事件触发
triggerDownLoadFile = id => {
    let params = {
      id,
    };
    customizeAxios.get('createExcel', { params }).then( res => {
	this.download(res.data, res)
})};

download(data,response) {
        const type = response.headers['content-type']
        let contentDisposition = response.headers['content-disposition']
        let filename = decodeURI(contentDisposition.split('fileName=')[1] || contentDisposition.split('filename=')[1]);
        let BLOB = new Blob([data], { type: type });
        let url = window.URL.createObjectURL(BLOB);
        let link = document.createElement('a');
        link.style.display = 'none';
        link.href = url;
        link.setAttribute('download', filename)
        document.body.appendChild(link);
        link.click();
  }
----------------------React-------------------------