美文网首页
前端使用二进制下载文件

前端使用二进制下载文件

作者: 佐伊zero | 来源:发表于2020-09-14 16:05 被阅读0次

    原因: 使用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 请求信息中查看是否设置生效

    相关文章

      网友评论

          本文标题:前端使用二进制下载文件

          本文链接:https://www.haomeiwen.com/subject/knuzektx.html