前端下载二进制流文件的几种做法

这套方案适合大多数现代浏览器。它的好处是简单，坏处也很现实：fetch 对上传下载进度这类细节没有现成的高层封装，想做得更细就得自己补。

用 axios 下载二进制流

如果项目里本来就统一用 axios，那直接沿用它更顺手。尤其是要处理响应头、认证信息或者和现有请求封装对接时，axios 会省很多事。

axios.get('/api/download', {
  responseType: 'blob',
  headers: { 'Content-Type': 'application/octet-stream' }
}).then(response => {
  const contentDisposition = response.headers['content-disposition'];
  let fileName = 'default.bin';
  if (contentDisposition) {
    const fileNameMatch = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
    if (fileNameMatch && fileNameMatch[1]) {
      fileName = decodeURIComponent(fileNameMatch[1].replace(/['"]+/g, ''));
    }
  }
  const blob = new Blob([response.data], { type: 'application/octet-stream' });
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
}).catch(error => {
  console.error('下载失败:', error);
});

这里最关键的还是 responseType: 'blob'。少了它，拿到的往往不是你想要的二进制文件，而是一团没法直接下载的数据。文件名最好从 Content-Disposition 里取，这比前端自己硬编码靠谱得多。

成功返回文件，失败返回 JSON 的情况

这个场景挺常见：接口成功时吐文件，出错时又返回一段 JSON。前端如果只按二进制处理，失败信息就会被吞掉，排障时挺烦。

axios.get('/api/download', { responseType: 'blob' }).then(response => {
  const contentType = response.headers['content-type'];
  if (contentType.includes('application/json')) {
    const reader = new FileReader();
    reader.onload = () => {
      const errorData = JSON.parse(reader.result);
      console.error('下载失败:', errorData.message);
    };
    reader.readAsText(response.data);
  } else {
    const blob = new Blob([response.data], { type: 'application/octet-stream' });
    // ...后续下载逻辑
  }
});

这种写法不算优雅，但实用。至少能把后端的错误信息还原出来，不至于用户点一下下载，前端只回一句'失败'就没下文了。

大文件和兼容性

大文件下载与进度

文件大一点的时候，一次性把内容塞进内存里并不舒服。可以用 ReadableStream 边读边处理，顺手把进度打出来：

async function downloadLargeFile(url, fileName) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  let chunks = [];
  while(true) {
    const {done, value} = await reader.read();
    if(done) break;
    chunks.push(value);
    receivedLength += value.length;
    console.log(`下载进度：${(receivedLength/contentLength*100).toFixed(2)}%`);
  }
  const blob = new Blob(chunks);
  // ...后续下载逻辑
}

它的价值主要在两个地方：一是能看见进度，二是对大文件更友好。缺点也明显，代码复杂度会上来，不是每个项目都值得这么做。

IE 浏览器兼容

如果还得照顾 IE10+，可以留一段 navigator.msSaveOrOpenBlob 的分支：

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  navigator.msSaveOrOpenBlob(blob, fileName);
} else {
  const url = window.URL.createObjectURL(blob);
  // ...创建 a 标签下载
}

这类兼容代码现在看起来有点旧，但在一些存量项目里还真少不了。

文件名乱码、跨域和内存回收

文件名乱码

文件名里一旦带中文或者特殊字符，解析不对就容易乱码。比较稳妥的做法还是从 Content-Disposition 里拆出来，再按编码规则解码：

const contentDisposition = response.headers['content-disposition'];
let fileName = 'download';
if (contentDisposition) {
  const utf8FilenameRegex = /filename\*=UTF-8''([\w%\-\.]+)(?:; ?|$)/i;
  const match = utf8FilenameRegex.exec(contentDisposition);
  if (match) {
    fileName = decodeURIComponent(match[1]);
  } else {
    const filenameRegex = /filename="?([^" ]+)"?/i;
    const match = filenameRegex.exec(contentDisposition);
    if (match) {
      fileName = match[1];
    }
  }
}

跨域

如果下载接口是跨域的，服务端 CORS 头得配对。前端这边如果还需要带 Cookie 或其他凭据，可以这样写：

fetch(url, { credentials: 'include' });

释放对象 URL

URL.createObjectURL() 创建出来的临时地址不用了就要回收。这个步骤容易被忽略，但累积起来就是实打实的内存占用。

收个尾

前端下载 application/octet-stream 文件，本质上就是把二进制响应变成浏览器能接受的下载动作。真正要处理好的点不多：responseType 设对、Blob 转对、文件名拿对、对象 URL 记得回收。再往上就是一些按项目需求加的细节，比如错误响应解析、大文件流式处理和老浏览器兼容。

如果项目偏现代，fetch + Blob 就够了；如果已经深度依赖 axios，那继续用它更省心。