前端使用二进制下载文件

2020-09-14  本文已影响0人  佐伊zero

原因: 使用iframe src属性,不能监听到什么时候后台计算完成开始下载,故使用ajax请求,可以设置loading,确定请求结束时间,代码如下:

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); // 创建下载的链接
      Link.href = href;
      Link.download = fileName; // 下载后文件名
      document.body.appendChild(Link);
      Link.click(); // 点击下载
      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,
    });
  });
}

设置 reponseType:'blob';为二进制流,如果设置了没有生气,可以在request 请求信息中查看是否设置生效

上一篇 下一篇

猜你喜欢

热点阅读