POST请求 下载文件

通过axios发送POST请求 下载文件。

这时候的 Content-Type: application/json;charset=UTF-8

先贴

axios({
  method: 'post',
  url: 'xxx/xxx',
  data: {***},
  responseType: 'blob', // 这里很重要，如果没有，respons.data 为''，传了返回的data是Blob格式。
}).then(response => {
  const disposition = response.headers['content-disposition'];
  if (disposition && disposition.indexOf('attachment') !== -1) {
    postDownload(response.data, '结算单.xls');
  }
}).catch((error) => {
    if(error.request.responseType === 'blob') {
    // 返回报错信息了。需要把Blob 转回json
        let errInfo = {};
        let reader = new FileReader();
        reader.readAsText(err.response.data, 'UTF-8');
        reader.onload = function () {
          errInfo = JSON.parse(reader.result);
          data.error && data.error.call(this, errInfo)
        };
     }
     else {
         data.error && data.error.call(this, err.response.data)
     }
})

与后台沟通好response header的设置，并规定好fileName的编码方式，方便前端拿到后解析

   content-disposition: attachment;fileName=%E9%81%A5%E6%84%9F%E8%A7%A3%E8%AF%91%E6%95%B0%E6%8D%AE.xls
   content-type: application/octet-stream

我这边的后端也是抄的部分代码 返回的content-disposition里的fileName他也不知道是什么编码。。
content-disposition: "attachment;filename=结算单.xls"我解析不了 就写死了

这个是 传入（blob, filename）下载的函数，这是从别处抄的

function postDownload(blob, filename) {
    if (typeof window.navigator.msSaveBlob !== 'undefined') {
      // IE
      window.navigator.msSaveBlob(blob, filename);
    } else {
      const URL = window.URL || window.webkitURL;
      const downloadUrl = URL.createObjectURL(blob);
      if (filename) {
        // use HTML5 a[download] attribute to specify filename
        const a = document.createElement('a');
        // safari doesn't support this yet
        if (typeof a.download === 'undefined') {
          window.location = downloadUrl;
        } else {
          a.href = downloadUrl;
          a.target = '_blank';
          a.download = filename;
          document.body.appendChild(a);
          a.click();
        }
      } else {
        window.location = downloadUrl;
      }
      setTimeout(() => { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
    }
  }

表单post下载

我感觉更简单。和第一种略有区别，这个我没用过，先贴着，以后用得到。
原理： 创建一个隐藏form表单，通过form表单的提交刷新功能，实现下载。代码如下：

downloadExcel(url, obj) {
    let tempForm = document.createElement('form');
    // var token = window.token || ''
    // if (url && token) {
    //     if (url.indexOf('?') !== -1) {
    //         url = url + '&token=' + token;
    //     } else {
    //         url = url + '?token=' + token;
    //     }
    // }
    tempForm.action = url;
    tempForm.method = 'post';
    tempForm.onsubmit = "return false";
    tempForm.style.display = 'none';
    for (let st in obj) {
        if (obj.hasOwnProperty(st)) {
            let opt = document.createElement('textarea');
            opt.name = st;
            opt.value = obj[st];
            tempForm.appendChild(opt);
        }
    }
    document.body.appendChild(tempForm);
    tempForm.submit();
    return tempForm;
}

这时候的 Content-Type: application/x-www-form-urlencoded; charset=UTF-8