前端下载 Content-Type 为 application/octet-stream 文件的方法

优点：

• 代码简洁清晰
• 支持设置请求头，适合需要认证的场景
• 可以处理大文件

方法二：使用 axios 处理二进制流

如果你的项目中使用 axios 作为 HTTP 客户端，可以这样实现：

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);
});

注意事项：

1. 必须设置 responseType: 'blob'，否则无法正确处理二进制数据
2. 建议从 Content-Disposition 响应头中获取文件名，这样更灵活
3. 记得释放创建的 ObjectURL，避免内存泄漏

方法三：处理混合响应（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' });
    // ...后续下载逻辑
  }
});

这种处理方式可以更好地处理错误情况，给用户友好的提示。

进阶技巧

1. 大文件下载与进度显示

对于大文件下载，可以使用 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);
  // ...后续下载逻辑
}

这种方式可以避免一次性加载大文件导致的内存问题。

2. IE 浏览器兼容处理

对于需要支持 IE10+ 的项目，可以使用 navigator.msSaveBlob：

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

这样可以确保在 IE 浏览器中也能正常工作。

常见问题与解决方案

1. 文件名乱码问题

当文件名包含中文或特殊字符时，可能会出现乱码。解决方案是从 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];
    }
  }
}

2. 跨域问题

如果下载接口跨域，需要确保：

1. 服务器设置了正确的 CORS 头
2. 请求时带上必要的凭据：

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

3. 内存泄漏

每次调用 URL.createObjectURL() 都会创建一个新的 URL 对象，必须在使用后调用 URL.revokeObjectURL() 释放内存。

总结

前端下载 application/octet-stream 类型的文件主要涉及以下关键点：

1. 设置正确响应类型：请求时必须设置 responseType: 'blob'
2. Blob 转换：将响应数据转换为 Blob 对象
3. 触发下载：通过创建 a 标签和 ObjectURL 实现下载
4. 资源清理：下载完成后释放 ObjectURL
5. 错误处理：处理可能的 JSON 错误响应
6. 兼容性：针对 IE 浏览器使用专用 API

根据项目需求，可以选择简单的 fetch 方案或功能更全面的 axios 方案。对于大文件下载，建议使用流式处理并显示进度，提升用户体验。