前端使用二進(jìn)制下載文件

原因: 使用iframe src屬性,不能監(jiān)聽到什么時候后臺計算完成開始下載,故使用ajax請求,可以設(shè)置loading,確定請求結(jié)束時間,代碼如下:

function axiosDownload(src) {
  axios({
    method: 'get',
    url: src,
    responseType: 'blob',
  }).then((res) => {
    loadingInstance.close();
    if (res.status === 200) {
      const blob = new Blob([res.data], { type: 'application/octet-stream' });
      const disposition = decodeURI(res.headers['content-disposition']); // 獲取filename
      const fileName = disposition.substring(disposition.indexOf('filename=') + 10, disposition.length - 1);
      const Link = document.createElement('a');
      const href = window.URL.createObjectURL(blob); // 創(chuàng)建下載的鏈接
      Link.href = href;
      Link.download = fileName; // 下載后文件名
      document.body.appendChild(Link);
      Link.click(); // 點(diǎn)擊下載
      document.body.removeChild(Link); // 下載完成移除元素
      window.URL.revokeObjectURL(href); // 釋放掉blob對象
    } else {
      Message.error({
        message: '下載文件失敗',
        showClose: true,
      });
    }
  }).catch((err) => {
    loadingInstance.close();
    Message.error({
      message: `${err}`,
      showClose: true,
    });
  });
}

設(shè)置 reponseType:'blob';為二進(jìn)制流,如果設(shè)置了沒有生氣,可以在request 請求信息中查看是否設(shè)置生效

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容