注意：

• download 属性仅对同源 URL/Blob URL/Data URL 生效，跨域 URL 若无 CORS 会直接跳转而非下载；

• 部分浏览器（如 Safari）对download属性的文件名特殊字符（如中文）支持不佳，建议后端返回Content-Disposition头兜底。

2. 动态接口下载（POST/GET 请求，如导出 Excel）

核心流程：请求接口获取二进制流 → 转 Blob → 生成临时 URL → 触发下载 → 释放 URL。

// 通用下载函数（基于fetch）
async function downloadFile(url, options = {}) {
  const { 
    method = 'GET', 
    data, 
    fileName = 'download', 
    headers = {} 
  } = options;


  try {
    // 1. 请求接口，获取二进制响应
    const response = await fetch(url, {
      method,
      headers: {
        'Content-Type': 'application/json', // 根据接口调整
        ...headers
      },
      body: method === 'POST' ? JSON.stringify(data) : undefined
    });


    if (!response.ok) throw new Error(`请求失败：${response.status}`);


    // 2. 解析为Blob（根据文件类型指定MIME）
    const blob = await response.blob();
    // 可选：从响应头提取文件名（后端需返回Content-Disposition）
    const disposition = response.headers.get('Content-Disposition');
    if (disposition) {
      const match = disposition.match(/filename="?([^";]+)"?/);
      if (match) fileName = decodeURIComponent(match[1]);
    }


    // 3. 生成临时URL并触发下载
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = fileName; // 文件名（含扩展名）
    a.click();


    // 4. 释放内存（关键）
    URL.revokeObjectURL(blobUrl);
    return { success: true };
  } catch (error) {
    console.error('下载失败：', error);
    return { success: false, error };
  }
}


// 调用示例：导出Excel（POST请求）
downloadFile('/api/export/excel', {
  method: 'POST',
  data: { startDate: '2025-01-01', endDate: '2025-12-31' },
  fileName: '2025数据报表.xlsx'
}).then(res => {
  if (res.success) alert('下载成功');
  else alert('下载失败：' + res.error.message);
});

三、进阶优化方案

1. 大文件下载（流式处理 + 进度展示）

使用 Response.body 流式读取，避免一次性加载大文件到内存：

async function downloadLargeFile(url, fileName) {
  const response = await fetch(url);
  if (!response.ok) throw new Error('请求失败');


  // 获取文件总大小
  const totalSize = Number(response.headers.get('Content-Length'));
  let downloadedSize = 0;


  // 流式读取响应
  const reader = response.body.getReader();
  const chunks = [];


  while (true) {
    const { done, value } = await reader.read();
    if (done) break;


    chunks.push(value);
    downloadedSize += value.length;
    // 计算进度（展示给用户）
    const progress = (downloadedSize / totalSize) * 100;
    console.log(`下载进度：${progress.toFixed(2)}%`);
  }


  // 合并分块为Blob
  const blob = new Blob(chunks);
  // 后续同普通Blob下载逻辑...
}

2. 断点续传（基于 Range 请求）

适用于超大文件，核心是后端支持 Range 头，前端记录已下载的字节范围：

// 断点续传核心逻辑
async function resumeDownload(url, fileName, startByte = 0) {
  const response = await fetch(url, {
    headers: {
      Range: `bytes=${startByte}-` // 请求从startByte开始的字节
    }
  });


  // 后端返回206 Partial Content表示支持续传
  if (response.status !== 206) throw new Error('不支持断点续传');


  // 读取剩余字节并追加到已下载的Blob中（需本地存储已下载的块）
  // （完整实现需结合localStorage/indexedDB存储已下载块和进度）
}

3. 兼容性处理

• IE 浏览器：IE10+ 不支持 URL.createObjectURL，需用 msSaveBlob：

// 兼容IE的Blob下载
function downloadBlobIE(blob, fileName) {
  if (window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, fileName);
  } else {
    // 普通浏览器逻辑
  }
}

• Safari 移动端：download 属性可能失效，需确保 Blob 的 MIME 类型正确，或引导用户手动保存。

import { saveAs } from 'file-saver';
saveAs(blob, '文件名.xlsx');