前端解析二进制流实现文件下载（封装下载接口）

最新推荐文章于 2025-12-19 10:56:02 发布

原创最新推荐文章于 2025-12-19 10:56:02 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

js 同时被 2 个专栏收录

7 篇文章

订阅专栏

代码块

1 篇文章

订阅专栏

/**
 * @desc download 下载封装
 * @ params {  }
 */
const downloadPost = (url, params = {}, filename, onProgress) => {
  return new Promise((resolve, reject) => {
    try {
      axios
        .post(url, params, {
          responseType: 'blob',
          onDownloadProgress: onProgress
        })
        .then(res => {
          if (!(res.data instanceof Blob)) {
            NotifyMethod('下载失败啦！');
            reject(new Error('下载失败啦！'));
          } else {
            let blob = res.data;
            if (window.navigator.msSaveOrOpenBlob) {
              navigator.msSaveBlob(blob, file.fileName);
            } else {
              let aEle = document.createElement('a');
              aEle.href = window.URL.createObjectURL(blob);
              if (!filename) {
                // 没传文件名，就用后台的filename， 后台也没有传就。。。。
                let res_header = res.headers['content-disposition'];
                if (res_header && res_header.indexOf('filename=') !== -1) {
                  filename = res_header.split('filename=')[1];
                } else if (
                  res_header &&
                  res_header.indexOf('fileName=') !== -1
                ) {
                  filename = res_header.split('fileName=')[1];
                }
                filename = decodeURIComponent(filename || '');
              }
              aEle.download = filename;
              aEle.click();
              window.URL.revokeObjectURL(aEle.href);
            }
            resolve();
          }
        });
    } catch (err) {
      console.err(err);
      reject(err);
    }
  });
};

使用

export ImportData = params => axios.downloadPost( '下载接口路径', params);