关于javascript:POST请求-下载文件

34次阅读

共计 2307 个字符,预计需要花费 6 分钟才能阅读完成。

通过 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
  文件名称:
  文件大小:
  下载声明:本站部分资源来自于网络收集,若侵犯了你的隐私或版权,请及时联系我们删除有关信息。
下载地址:
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

正文完
 0