前端处理.xlsx文件流并触发下载的完整实现方案

import axios from 'axios';

const downloadExcel = async (apiPath, fileName = 'data.xlsx') => {
  try {
    const response = await axios.get(apiPath, {
      responseType: 'blob',
      headers: { Authorization: 'Bearer your_token' }
    });

    // 创建 Blob 并生成链接
    const blob = new Blob([response.data], { 
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
    });
    const url = window.URL.createObjectURL(blob);

    // 动态创建下载链接
    const link = document.createElement('a');
    link.href = url;
    link.download = await getFileName(response); // 获取文件名方法
    document.body.appendChild(link);
    link.click();

    // 资源清理
    URL.revokeObjectURL(url);
    link.remove();
  } catch (error) {
    console.error('下载失败:', error);
    showErrorNotification('文件下载失败，请重试');
  }
};

// 从响应头解析文件名
const getFileName = (response) => {
  const disposition = response.headers['content-disposition'];
  return disposition?.match(/filename="?(.+)"?/)?.[1] || 'default.xlsx';
};

const fetchExcel = async (url, fileName = 'export.xlsx') => {
  try {
    const response = await fetch(url, {
      headers: { Authorization: 'Bearer your_token' }
    });
    
    if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
    
    const blob = await response.blob();
    const downloadUrl = URL.createObjectURL(blob);
    
    const tempLink = document.createElement('a');
    tempLink.href = downloadUrl;
    tempLink.download = fileName;
    tempLink.style.display = 'none';
    
    document.body.appendChild(tempLink);
    tempLink.click();
    document.body.removeChild(tempLink);
    URL.revokeObjectURL(downloadUrl);
  } catch (error) {
    console.error('下载异常:', error);
  }
};

// 从 Content-Disposition 头解析文件名
const extractFilename = (headers) => {
  const disposition = headers.get('Content-Disposition') || '';
  const filenameRegex = /filename\*?=['"]?(?:UTF-\d['"]*)?([^;\r\n"']*)['"]?/;
  return decodeURIComponent(filenameRegex.exec(disposition)?.[1] || 'export.xlsx');
};

// 分块下载处理（伪代码）
const handleLargeFile = async () => {
  const response = await fetch(url);
  const reader = response.body.getReader();
  
  while(true) {
    const { done, value } = await reader.read();
    if (done) break;
    // 处理分块数据
  }
};

npm install file-saver

import { saveAs } from 'file-saver';

const optimizedDownload = async () => {
  try {
    const response = await axios.get('/api/file', {
      responseType: 'blob'
    });
    
    const blob = new Blob([response.data], { type: 'application/octet-stream' });
    saveAs(blob, 'optimized.xlsx');
  } catch (error) {
    console.error('文件保存失败:', error);
  }
};