关于javascript: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) => {    // 这里catch我没试过，抄的。。 也不晓得对不对    if(error.request.responseType === 'blob') {        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

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

表单post下载

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