【前端文件下载实现：多种表格导出方案的技术解析】

Gazer_S2025-03-15 16:20

前端文件下载实现：多种表格导出方案的技术解析

背景介绍

在企业级应用中，数据导出是一个常见需求，特别是表格数据的导出。在我们的管理系统中，不仅需要支持用户数据的Excel导出，还需要处理多种格式的表格文件下载，如CSV、PDF和其他专有格式。本文将详细介绍我们是如何实现这些功能的，以及在实现过程中遇到的技术挑战和解决方案。

多种表格导出方案对比

在实现表格导出功能时，我们考虑了以下几种技术方案：

1. 前端生成表格文件

适用场景：数据量小，对格式要求不高，不需要复杂样式

实现方式：

  • 使用js-xlsx、SheetJS等库在前端直接生成Excel文件
  • 使用PapaParse等库生成CSV文件
  • 使用jsPDF等库生成PDF文件

优点：

  • 减轻服务器负担
  • 无需等待网络请求，响应速度快
  • 可离线使用

缺点：

  • 大数据量时浏览器性能可能成为瓶颈
  • 复杂样式和格式支持有限
  • 客户端计算资源消耗大

2. 服务端生成文件，前端下载

适用场景：数据量大，需要复杂样式，需要应用业务逻辑

实现方式：

  • XMLHttpRequest/Fetch + Blob（我们的主要方案）
  • 表单提交
  • iframe下载
  • a标签下载

优点：

  • 可处理大数据量
  • 支持复杂样式和格式
  • 可应用服务端业务逻辑

缺点：

  • 依赖网络请求
  • 服务器负担较重
  • 实现复杂度较高

3. 混合方案

适用场景：需要兼顾性能和功能的场景

实现方式：

  • 小数据量时前端生成
  • 大数据量或复杂格式时服务端生成

优点：

  • 灵活性高
  • 可根据具体需求选择最优方案

缺点：

  • 实现和维护成本高
  • 需要前后端配合

实现细节：服务端生成文件，前端下载

我们主要采用服务端生成文件，前端下载的方案。下面详细介绍几种不同的实现方式。

1. XMLHttpRequest + Blob方式（主要方案）

这是我们在用户模块中采用的主要方案，适用于需要POST参数的场景：

typescript 复制代码 
export const exportUserFeedback = async (params: any = {}): Promise<void> => {
  try {
    const baseURL = `/${import.meta.env.VITE_API_XXX_BASEPATH}`;
    const url = `${baseURL}/xxxx/xx/exportProblemUserIssueList`;

    return new Promise<void>((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('POST', url, true);
      xhr.setRequestHeader('Content-Type', 'application/json');
      xhr.responseType = 'blob'; // 设置响应类型为blob

      xhr.onload = function() {
        if (this.status === 200) {
          // 从响应头中获取文件名
          const contentDisposition = xhr.getResponseHeader('content-disposition') || '';
          let filename = `用户反馈_${new Date().getTime()}.xlsx`;

          // 尝试从content-disposition中提取文件名
          const filenameMatch = contentDisposition.match(/filename=([^;]+)/);
          if (filenameMatch && filenameMatch[1]) {
            try {
              filename = decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
            } catch (e) {
              console.warn('无法解码文件名', e);
            }
          }

          // 创建下载链接并触发下载
          const blob = this.response;
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = filename;
          document.body.appendChild(link);
          link.click();

          // 清理
          setTimeout(() => {
            window.URL.revokeObjectURL(url);
            document.body.removeChild(link);
          }, 100);

          resolve();
        } else {
          reject(new Error(`导出失败: ${this.status}`));
        }
      };

      xhr.onerror = function() {
        reject(new Error('网络错误'));
      };

      xhr.send(JSON.stringify(params));
    });
  } catch (error) {
    console.error('导出文件失败:', error);
    throw error;
  }
};

2. Fetch API方式

对于支持现代浏览器的应用，可以使用更简洁的Fetch API：

typescript 复制代码 
export const exportWithFetch = async (params: any = {}): Promise<void> => {
  try {
    const baseURL = `/${import.meta.env.VITE_API_XXX_BASEPATH}`;
    const url = `${baseURL}/report/exportReportData`;

    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(params)
    });

    if (!response.ok) {
      throw new Error(`导出失败: ${response.status}`);
    }

    // 获取文件名
    const contentDisposition = response.headers.get('content-disposition') || '';
    let filename = `报表数据_${new Date().getTime()}.xlsx`;

    const filenameMatch = contentDisposition.match(/filename=([^;]+)/);
    if (filenameMatch && filenameMatch[1]) {
      try {
        filename = decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
      } catch (e) {
        console.warn('无法解码文件名', e);
      }
    }

    // 获取blob数据并下载
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();

    // 清理
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }, 100);
  } catch (error) {
    console.error('导出文件失败:', error);
    throw error;
  }
};

3. 表单提交方式

对于简单的GET请求或需要兼容旧浏览器的场景，可以使用表单提交方式：

typescript 复制代码 
export const exportWithForm = (params: any = {}): void => {
  const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
  const url = `${baseURL}/statistics/exportStatisticsData`;

  // 创建一个隐藏的表单
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = url;
  form.style.display = 'none';

  // 添加参数
  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined && value !== null) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = String(value);
      form.appendChild(input);
    }
  });

  // 提交表单
  document.body.appendChild(form);
  form.submit();

  // 清理
  setTimeout(() => {
    document.body.removeChild(form);
  }, 100);
};

4. iframe方式

对于需要在后台下载且不影响当前页面的场景，可以使用iframe方式：

typescript 复制代码 
export const exportWithIframe = (params: any = {}): void => {
  const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
  const url = `${baseURL}/analysis/exportAnalysisData`;

  // 创建一个隐藏的iframe
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  document.body.appendChild(iframe);

  // 创建一个表单
  const form = document.createElement('form');
  form.method = 'POST';
  form.action = url;
  form.target = iframe.name = `download_iframe_${Date.now()}`;

  // 添加参数
  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined && value !== null) {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = key;
      input.value = String(value);
      form.appendChild(input);
    }
  });

  // 提交表单
  document.body.appendChild(form);
  form.submit();

  // 清理
  setTimeout(() => {
    document.body.removeChild(form);
    document.body.removeChild(iframe);
  }, 5000); // 给足够的时间下载
};

不同类型表格文件的响应头处理

不同类型的表格文件有不同的Content-Type和处理方式，下面我们详细介绍几种常见类型。

1. Excel文件 (XLSX/XLS)

响应头示例：

复制代码 
HTTP/1.1 200 OK
content-type: application/vnd.ms-excel;charset=gb2312
content-disposition: attachment;filename=%E7%94%A8%E6%88%B7%E5%8F%8D%E9%A6%88.xlsx

处理方式：

  • 使用xhr.responseType = 'blob'接收二进制数据
  • 从Content-Disposition中提取文件名
  • 使用URL.createObjectURL创建下载链接

2. CSV文件

响应头示例：

复制代码 
HTTP/1.1 200 OK
content-type: text/csv;charset=utf-8
content-disposition: attachment;filename=data.csv

处理方式：

  • CSV文件可以作为文本或二进制处理
  • 如果作为文本处理，需要注意字符编码问题
  • 中文CSV文件可能需要添加BOM头（\uFEFF）以正确显示中文
typescript 复制代码 
export const exportCSV = async (params: any = {}): Promise<void> => {
  try {
    const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
    const url = `${baseURL}/data/exportCSV`;

    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(params)
    });

    if (!response.ok) {
      throw new Error(`导出失败: ${response.status}`);
    }

    // 获取文件名
    const contentDisposition = response.headers.get('content-disposition') || '';
    let filename = `数据_${new Date().getTime()}.csv`;

    const filenameMatch = contentDisposition.match(/filename=([^;]+)/);
    if (filenameMatch && filenameMatch[1]) {
      try {
        filename = decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
      } catch (e) {
        console.warn('无法解码文件名', e);
      }
    }

    // 对于CSV，可以选择文本处理或二进制处理
    // 这里使用二进制处理，与Excel保持一致
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();

    // 清理
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }, 100);
  } catch (error) {
    console.error('导出CSV失败:', error);
    throw error;
  }
};

3. PDF文件

响应头示例：

复制代码 
HTTP/1.1 200 OK
content-type: application/pdf
content-disposition: attachment;filename=report.pdf

处理方式：

  • PDF文件处理与Excel类似，都使用blob方式
  • 可以选择直接在浏览器中打开，而不是下载
typescript 复制代码 
export const exportPDF = async (params: any = {}): Promise<void> => {
  try {
    const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
    const url = `${baseURL}/report/exportPDF`;

    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(params)
    });

    if (!response.ok) {
      throw new Error(`导出失败: ${response.status}`);
    }

    // 获取文件名
    const contentDisposition = response.headers.get('content-disposition') || '';
    let filename = `报告_${new Date().getTime()}.pdf`;

    const filenameMatch = contentDisposition.match(/filename=([^;]+)/);
    if (filenameMatch && filenameMatch[1]) {
      try {
        filename = decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
      } catch (e) {
        console.warn('无法解码文件名', e);
      }
    }

    const blob = await response.blob();
    
    // 选项1：下载文件
    const downloadUrl = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = downloadUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    
    // 选项2：在新窗口打开PDF（取消注释以启用）
    // const viewUrl = window.URL.createObjectURL(blob);
    // window.open(viewUrl, '_blank');

    // 清理
    setTimeout(() => {
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(link);
    }, 100);
  } catch (error) {
    console.error('导出PDF失败:', error);
    throw error;
  }
};

4. 特殊格式：带有自定义响应头的Excel文件

有些后端框架或服务器配置可能会使用非标准的响应头，例如：

响应头示例：

复制代码 
HTTP/1.1 200 OK
content-type: application/octet-stream
x-suggested-filename: 统计报表.xlsx
content-disposition: inline

处理方式：

  • 需要检查多个可能的响应头
  • 提供更健壮的文件名提取逻辑
typescript 复制代码 
export const exportSpecialExcel = async (params: any = {}): Promise<void> => {
  try {
    const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
    const url = `${baseURL}/special/exportExcel`;

    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.responseType = 'blob';

    return new Promise<void>((resolve, reject) => {
      xhr.onload = function() {
        if (this.status === 200) {
          // 尝试从多个可能的响应头中获取文件名
          let filename = `数据_${new Date().getTime()}.xlsx`;
          
          // 1. 尝试标准的Content-Disposition
          const contentDisposition = xhr.getResponseHeader('content-disposition') || '';
          let filenameMatch = contentDisposition.match(/filename=([^;]+)/);
          
          // 2. 尝试自定义的X-Suggested-Filename
          if (!filenameMatch) {
            const suggestedFilename = xhr.getResponseHeader('x-suggested-filename');
            if (suggestedFilename) {
              filenameMatch = [null, suggestedFilename];
            }
          }
          
          // 3. 尝试Content-Disposition中的filename*=UTF-8''格式
          if (!filenameMatch) {
            const filenameStarMatch = contentDisposition.match(/filename\*=UTF-8''([^;]+)/);
            if (filenameStarMatch) {
              filenameMatch = filenameStarMatch;
            }
          }
          
          if (filenameMatch && filenameMatch[1]) {
            try {
              filename = decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
            } catch (e) {
              console.warn('无法解码文件名', e);
            }
          }

          // 创建下载链接并触发下载
          const blob = this.response;
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = filename;
          document.body.appendChild(link);
          link.click();

          // 清理
          setTimeout(() => {
            window.URL.revokeObjectURL(url);
            document.body.removeChild(link);
          }, 100);

          resolve();
        } else {
          reject(new Error(`导出失败: ${this.status}`));
        }
      };

      xhr.onerror = function() {
        reject(new Error('网络错误'));
      };

      xhr.send(JSON.stringify(params));
    });
  } catch (error) {
    console.error('导出文件失败:', error);
    throw error;
  }
};

5. 流式下载大文件

对于特别大的表格文件，可以考虑使用流式下载：

typescript 复制代码 
export const exportLargeFile = async (params: any = {}): Promise<void> => {
  try {
    const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
    const url = `${baseURL}/data/exportLargeFile`;

    // 使用fetch的流式API
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(params)
    });

    if (!response.ok) {
      throw new Error(`导出失败: ${response.status}`);
    }

    // 获取文件名
    const contentDisposition = response.headers.get('content-disposition') || '';
    let filename = `大文件_${new Date().getTime()}.xlsx`;

    const filenameMatch = contentDisposition.match(/filename=([^;]+)/);
    if (filenameMatch && filenameMatch[1]) {
      try {
        filename = decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
      } catch (e) {
        console.warn('无法解码文件名', e);
      }
    }

    // 获取reader和流
    const reader = response.body?.getReader();
    if (!reader) {
      throw new Error('浏览器不支持流式下载');
    }

    // 创建一个新的ReadableStream
    const stream = new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            push();
          }).catch(error => {
            console.error('流读取错误', error);
            controller.error(error);
          });
        }
        push();
      }
    });

    // 创建响应对象
    const newResponse = new Response(stream);
    
    // 获取blob并下载
    const blob = await newResponse.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();

    // 清理
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }, 100);
  } catch (error) {
    console.error('导出大文件失败:', error);
    throw error;
  }
};

前端生成表格文件的方案

除了服务端生成文件外，有时我们也需要在前端直接生成表格文件。

1. 使用SheetJS生成Excel

typescript 复制代码 
import * as XLSX from 'xlsx';

export const generateExcel = (data: any[], sheetName = 'Sheet1', fileName = '数据导出.xlsx'): void => {
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  
  // 创建工作表
  const ws = XLSX.utils.json_to_sheet(data);
  
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, sheetName);
  
  // 生成Excel文件并下载
  XLSX.writeFile(wb, fileName);
};

2. 使用PapaParse生成CSV

typescript 复制代码 
import Papa from 'papaparse';

export const generateCSV = (data: any[], fileName = '数据导出.csv'): void => {
  // 将数据转换为CSV字符串
  const csv = Papa.unparse(data);
  
  // 添加BOM头以支持中文
  const csvContent = "\uFEFF" + csv;
  
  // 创建Blob对象
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  
  // 创建下载链接并触发下载
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  
  // 清理
  setTimeout(() => {
    window.URL.revokeObjectURL(url);
    document.body.removeChild(link);
  }, 100);
};

3. 使用jsPDF生成PDF表格

typescript 复制代码 
import jsPDF from 'jspdf';
import 'jspdf-autotable';

export const generatePDF = (data: any[], columns: any[], fileName = '数据导出.pdf'): void => {
  // 创建PDF文档
  const doc = new jsPDF();
  
  // 添加表格
  doc.autoTable({
    head: [columns.map(col => col.title)],
    body: data.map(item => columns.map(col => item[col.dataIndex])),
    startY: 20,
    styles: { fontSize: 10, cellPadding: 2 },
    headStyles: { fillColor: [41, 128, 185], textColor: 255 }
  });
  
  // 添加标题
  doc.text('数据报表', 14, 15);
  
  // 保存PDF文件
  doc.save(fileName);
};

响应头处理中的挑战与解决方案

1. 中文文件名编码问题

不同的浏览器和服务器对中文文件名的处理方式不同，可能会导致乱码。

常见编码方式：

  • URL编码：%E7%94%A8%E6%88%B7%E5%8F%8D%E9%A6%88.xlsx
  • Base64编码：=?UTF-8?B?5oqA5pyv5pWZ6IKy5pyN5Yqh5ZGY?=.xlsx
  • RFC 5987编码：filename*=UTF-8''%E7%94%A8%E6%88%B7%E5%8F%8D%E9%A6%88.xlsx

解决方案：

  • 检查多种可能的编码格式
  • 提供默认文件名作为后备方案
  • 使用try-catch包装解码逻辑
typescript 复制代码 
function extractFilename(headers: Headers): string {
  const contentDisposition = headers.get('content-disposition') || '';
  let filename = `数据_${new Date().getTime()}.xlsx`;
  
  // 尝试标准的filename参数
  let match = contentDisposition.match(/filename=([^;]+)/);
  if (match && match[1]) {
    try {
      return decodeURIComponent(match[1].replace(/\"/g, ''));
    } catch (e) {
      console.warn('无法解码filename', e);
    }
  }
  
  // 尝试RFC 5987格式
  match = contentDisposition.match(/filename\*=UTF-8''([^;]+)/);
  if (match && match[1]) {
    try {
      return decodeURIComponent(match[1]);
    } catch (e) {
      console.warn('无法解码filename*', e);
    }
  }
  
  // 尝试Base64编码
  match = contentDisposition.match(/=\?UTF-8\?B\?([^?]+)\?=/);
  if (match && match[1]) {
    try {
      return atob(match[1]);
    } catch (e) {
      console.warn('无法解码Base64文件名', e);
    }
  }
  
  return filename;
}

2. 不同浏览器的兼容性问题

不同浏览器对下载API和响应头的处理有差异。

解决方案：

  • 使用特性检测而不是浏览器检测
  • 提供多种下载方式的回退机制
  • 针对特定浏览器添加特殊处理
typescript 复制代码 
function downloadFile(blob: Blob, filename: string): void {
  // 方法1: 使用a标签下载（现代浏览器）
  if ('download' in document.createElement('a')) {
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }, 100);
    return;
  }
  
  // 方法2: 使用msSaveBlob（IE10+）
  if (window.navigator && window.navigator.msSaveBlob) {
    window.navigator.msSaveBlob(blob, filename);
    return;
  }
  
  // 方法3: 使用FileReader和data URL（旧浏览器）
  const reader = new FileReader();
  reader.onload = function() {
    const url = reader.result as string;
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    iframe.src = url;
    document.body.appendChild(iframe);
    setTimeout(() => {
      document.body.removeChild(iframe);
    }, 100);
  };
  reader.readAsDataURL(blob);
}

3. 大文件处理

对于特别大的表格文件，直接在内存中处理可能会导致性能问题。

解决方案：

  • 使用流式下载
  • 分块处理
  • 添加下载进度提示

3. 大文件处理

typescript 复制代码 
export const downloadWithProgress = async (url: string, filename: string): Promise<void> => {
  // 创建进度条元素
  const progressContainer = document.createElement('div');
  progressContainer.style.position = 'fixed';
  progressContainer.style.top = '10px';
  progressContainer.style.right = '10px';
  progressContainer.style.padding = '10px';
  progressContainer.style.background = '#fff';
  progressContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  progressContainer.style.borderRadius = '4px';
  progressContainer.style.zIndex = '9999';
  
  const progressText = document.createElement('div');
  progressText.textContent = '准备下载...';
  progressContainer.appendChild(progressText);
  
  const progressBar = document.createElement('div');
  progressBar.style.height = '5px';
  progressBar.style.width = '200px';
  progressBar.style.background = '#eee';
  progressBar.style.marginTop = '5px';
  progressContainer.appendChild(progressBar);
  
  const progressInner = document.createElement('div');
  progressInner.style.height = '100%';
  progressInner.style.width = '0%';
  progressInner.style.background = '#4caf50';
  progressBar.appendChild(progressInner);
  
  document.body.appendChild(progressContainer);
  
  try {
    // 获取文件大小
    const headResponse = await fetch(url, { method: 'HEAD' });
    const contentLength = Number(headResponse.headers.get('content-length') || '0');
    
    // 创建请求
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`下载失败: ${response.status}`);
    }
    
    // 获取reader和流
    const reader = response.body?.getReader();
    if (!reader) {
      throw new Error('浏览器不支持流式下载');
    }
    
    // 已接收的字节数
    let receivedBytes = 0;
    
    // 创建一个新的ReadableStream
    const stream = new ReadableStream({
      start(controller) {
        function push() {
          reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            
            // 更新进度
            receivedBytes += value.length;
            const progress = contentLength ? Math.round((receivedBytes / contentLength) * 100) : 0;
            progressInner.style.width = `${progress}%`;
            progressText.textContent = `下载中... ${progress}%`;
            
            controller.enqueue(value);
            push();
          }).catch(error => {
            console.error('流读取错误', error);
            controller.error(error);
          });
        }
        push();
      }
    });
    
    // 创建响应对象
    const newResponse = new Response(stream);
    
    // 获取blob并下载
    const blob = await newResponse.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    
    // 更新进度提示
    progressText.textContent = '下载完成';
    progressInner.style.width = '100%';
    
    // 清理
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
      document.body.removeChild(progressContainer);
    }, 2000);
  } catch (error) {
    console.error('下载失败:', error);
    progressText.textContent = `下载失败: ${error.message}`;
    progressInner.style.background = '#f44336';
    
    // 清理
    setTimeout(() => {
      document.body.removeChild(progressContainer);
    }, 3000);
    throw error;
  }
};

2. 分页下载

对于特别大的数据集，可以考虑分页下载：

typescript 复制代码 
export const downloadByChunks = async (params: any = {}, totalPages: number): Promise<void> => {
  // 创建进度提示
  const progressContainer = document.createElement('div');
  progressContainer.style.position = 'fixed';
  progressContainer.style.top = '10px';
  progressContainer.style.right = '10px';
  progressContainer.style.padding = '10px';
  progressContainer.style.background = '#fff';
  progressContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  progressContainer.style.borderRadius = '4px';
  progressContainer.style.zIndex = '9999';
  
  const progressText = document.createElement('div');
  progressText.textContent = '准备下载...';
  progressContainer.appendChild(progressText);
  
  document.body.appendChild(progressContainer);
  
  try {
    // 创建一个工作簿
    const wb = XLSX.utils.book_new();
    
    // 逐页下载数据
    for (let page = 1; page <= totalPages; page++) {
      progressText.textContent = `下载中... ${Math.round((page / totalPages) * 100)}%`;
      
      // 获取当前页数据
      const pageParams = { ...params, page, pageSize: 1000 };
      const data = await fetchPageData(pageParams);
      
      // 将数据添加到工作表
      if (page === 1) {
        // 创建新工作表
        const ws = XLSX.utils.json_to_sheet(data);
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      } else {
        // 追加到现有工作表
        const ws = wb.Sheets['Sheet1'];
        XLSX.utils.sheet_add_json(ws, data, { skipHeader: true, origin: -1 });
      }
    }
    
    // 生成Excel文件并下载
    XLSX.writeFile(wb, `数据导出_${new Date().getTime()}.xlsx`);
    
    // 更新进度提示
    progressText.textContent = '下载完成';
    
    // 清理
    setTimeout(() => {
      document.body.removeChild(progressContainer);
    }, 2000);
  } catch (error) {
    console.error('下载失败:', error);
    progressText.textContent = `下载失败: ${error.message}`;
    
    // 清理
    setTimeout(() => {
      document.body.removeChild(progressContainer);
    }, 3000);
    throw error;
  }
};

// 获取分页数据的辅助函数
async function fetchPageData(params: any): Promise<any[]> {
  const baseURL = `/${import.meta.env.VITE_API_SCCNP_BASEPATH}`;
  const url = `${baseURL}/data/getPageData`;
  
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(params)
  });
  
  if (!response.ok) {
    throw new Error(`获取数据失败: ${response.status}`);
  }
  
  const result = await response.json();
  return result.data || [];
}

4. 响应头获取限制

由于安全原因，浏览器限制了JavaScript可以访问的响应头。只有某些"安全"的头部（如Content-Type）默认可访问，而其他头部（如Content-Disposition）可能需要服务器通过Access-Control-Expose-Headers显式允许。

解决方案：

  • 确保服务器配置了正确的CORS头部
  • 使用后端代理转发请求
  • 在无法获取响应头的情况下提供替代方案
typescript 复制代码 
// 服务器端配置示例（Node.js + Express）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.header('Access-Control-Expose-Headers', 'Content-Disposition, Content-Length');
  next();
});

// 前端处理示例
export const safeGetFilename = (xhr: XMLHttpRequest, defaultName: string): string => {
  try {
    const contentDisposition = xhr.getResponseHeader('content-disposition');
    if (!contentDisposition) {
      console.warn('无法获取Content-Disposition头部，可能需要配置Access-Control-Expose-Headers');
      return defaultName;
    }
    
    const filenameMatch = contentDisposition.match(/filename=([^;]+)/);
    if (filenameMatch && filenameMatch[1]) {
      return decodeURIComponent(filenameMatch[1].replace(/\"/g, ''));
    }
  } catch (e) {
    console.warn('获取文件名失败', e);
  }
  
  return defaultName;
};

如果无法修改服务器配置，可以考虑以下替代方案：

javascript 复制代码 
// 前端处理示例：使用默认文件名
export const downloadWithDefaultFilename = async (url, defaultFilename) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`下载失败: ${response.status}`);
    }
    
    // 尝试获取Content-Disposition，如果无法获取则使用默认文件名
    let filename = defaultFilename;
    try {
      const contentDisposition = response.headers.get('content-disposition');
      if (contentDisposition) {
        const match = contentDisposition.match(/filename=([^;]+)/);
        if (match && match[1]) {
          filename = decodeURIComponent(match[1].replace(/\"/g, ''));
        }
      }
    } catch (e) {
      console.warn('无法获取文件名，使用默认文件名', e);
    }
    
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    
    setTimeout(() => {
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    }, 100);
  } catch (error) {
    console.error('下载失败:', error);
    throw error;
  }
};

4. 处理不同的Content-Type

不同的Content-Type可能需要不同的处理方式，特别是对于非标准的Content-Type。

解决方案：

  • 根据Content-Type选择不同的处理方式
  • 对于未知的Content-Type，使用通用的二进制处理方式
javascript 复制代码 
export const downloadByContentType = async (url) => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`下载失败: ${response.status}`);
    }
    
    // 获取Content-Type
    const contentType = response.headers.get('content-type') || '';
    
    // 获取文件名
    let filename = getFilenameFromResponse(response);
    
    // 根据Content-Type选择处理方式
    if (contentType.includes('text/')) {
      // 文本文件处理
      const text = await response.text();
      const blob = new Blob([text], { type: contentType });
      downloadBlob(blob, filename);
    } else if (contentType.includes('application/json')) {
      // JSON文件处理
      const json = await response.json();
      const blob = new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' });
      downloadBlob(blob, filename);
    } else {
      // 二进制文件处理
      const blob = await response.blob();
      downloadBlob(blob, filename);
    }
  } catch (error) {
    console.error('下载失败:', error);
    throw error;
  }
};

// 辅助函数：从响应中获取文件名
function getFilenameFromResponse(response) {
  const contentDisposition = response.headers.get('content-disposition') || '';
  let filename = `文件_${new Date().getTime()}`;
  
  // 尝试从Content-Disposition中提取文件名
  const match = contentDisposition.match(/filename=([^;]+)/);
  if (match && match[1]) {
    try {
      filename = decodeURIComponent(match[1].replace(/\"/g, ''));
    } catch (e) {
      console.warn('无法解码文件名', e);
    }
  } else {
    // 尝试从URL中提取文件名
    const url = response.url;
    const urlParts = url.split('/');
    const urlFilename = urlParts[urlParts.length - 1].split('?')[0];
    if (urlFilename) {
      filename = urlFilename;
    }
  }
  
  return filename;
}

// 辅助函数：下载Blob
function downloadBlob(blob, filename) {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  
  setTimeout(() => {
    window.URL.revokeObjectURL(url);
    document.body.removeChild(link);
  }, 100);
}

特殊场景处理

1. 处理带有水印的Excel文件

某些业务场景需要在导出的Excel文件中添加水印，这通常需要服务端支持。但在某些情况下，我们也可以在前端处理：

typescript 复制代码 
import * as XLSX from 'xlsx';

export const addWatermarkToExcel = async (blob: Blob, watermarkText: string): Promise<Blob> => {
  // 将blob转换为ArrayBuffer
  const arrayBuffer = await blob.arrayBuffer();
  
  // 读取Excel文件
  const workbook = XLSX.read(arrayBuffer, { type: 'array' });
  
  // 遍历所有工作表
  for (const sheetName of workbook.SheetNames) {
    const worksheet = workbook.Sheets[sheetName];
    
    // 添加水印（这需要使用更复杂的Excel操作库，如exceljs）
    // 这里只是一个简化示例，实际实现可能需要使用其他库
    if (!worksheet['!comments']) {
      worksheet['!comments'] = [];
    }
    
    // 在A1单元格添加注释作为简单的"水印"
    worksheet['!comments'].push({
      r: 0, c: 0,
      a: { t: watermarkText }
    });
  }
  
  // 将修改后的工作簿写回ArrayBuffer
  const newArrayBuffer = XLSX.write(workbook, { type: 'array', bookType: 'xlsx' });
  
  // 创建新的Blob
  return new Blob([newArrayBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
};

2. 处理加密的Excel文件

某些敏感数据可能需要加密保护：

typescript 复制代码 
import * as XLSX from 'xlsx';

export const createEncryptedExcel = (data: any[], password: string, fileName: string): void => {
  // 创建工作簿
  const wb = XLSX.utils.book_new();
  
  // 创建工作表
  const ws = XLSX.utils.json_to_sheet(data);
  
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  
  // 生成加密的Excel文件
  const wbout = XLSX.write(wb, { type: 'array', bookType: 'xlsx', password });
  
  // 创建Blob并下载
  const blob = new Blob([wbout], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  
  // 清理
  setTimeout(() => {
    window.URL.revokeObjectURL(url);
    document.body.removeChild(link);
  }, 100);
};

3. 处理多种格式的导出选项

有时我们需要提供多种格式的导出选项，让用户自行选择：

typescript 复制代码 
import * as XLSX from 'xlsx';

export const exportDataWithOptions = (data: any[], fileName: string): void => {
  // 创建下拉菜单
  const menu = document.createElement('div');
  menu.style.position = 'fixed';
  menu.style.top = '50%';
  menu.style.left = '50%';
  menu.style.transform = 'translate(-50%, -50%)';
  menu.style.background = '#fff';
  menu.style.boxShadow = '0 0 10px rgba(0,0,0,0.1)';
  menu.style.borderRadius = '4px';
  menu.style.padding = '20px';
  menu.style.zIndex = '9999';
  
  const title = document.createElement('h3');
  title.textContent = '选择导出格式';
  title.style.margin = '0 0 15px 0';
  menu.appendChild(title);
  
  // 创建选项
  const formats = [
    { label: 'Excel (.xlsx)', value: 'xlsx' },
    { label: 'Excel 97-2003 (.xls)', value: 'xls' },
    { label: 'CSV (.csv)', value: 'csv' },
    { label: 'HTML (.html)', value: 'html' },
    { label: 'JSON (.json)', value: 'json' }
  ];
  
  formats.forEach(format => {
    const button = document.createElement('button');
    button.textContent = format.label;
    button.style.display = 'block';
    button.style.width = '100%';
    button.style.padding = '8px';
    button.style.margin = '5px 0';
    button.style.border = '1px solid #ddd';
    button.style.borderRadius = '4px';
    button.style.background = '#f5f5f5';
    button.style.cursor = 'pointer';
    
    button.addEventListener('click', () => {
      // 创建工作簿
      const wb = XLSX.utils.book_new();
      
      // 创建工作表
      const ws = XLSX.utils.json_to_sheet(data);
      
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
      
      // 根据选择的格式导出
      XLSX.writeFile(wb, `${fileName}.${format.value}`);
      
      // 关闭菜单
      document.body.removeChild(menu);
    });
    
    menu.appendChild(button);
  });
  
  // 添加取消按钮
  const cancelButton = document.createElement('button');
  cancelButton.textContent = '取消';
  cancelButton.style.display = 'block';
  cancelButton.style.width = '100%';
  cancelButton.style.padding = '8px';
  cancelButton.style.margin = '15px 0 5px 0';
  cancelButton.style.border = '1px solid #ddd';
  cancelButton.style.borderRadius = '4px';
  cancelButton.style.background = '#fff';
  cancelButton.style.cursor = 'pointer';
  
  cancelButton.addEventListener('click', () => {
    document.body.removeChild(menu);
  });
  
  menu.appendChild(cancelButton);
  
  // 显示菜单
  document.body.appendChild(menu);
};

最佳实践总结

基于我们的实践经验，处理表格文件下载时，建议遵循以下最佳实践：

1. 响应头处理

  • 总是检查Content-Disposition头部：这是获取正确文件名的关键
  • 提供默认文件名：作为Content-Disposition不存在或解析失败时的后备方案
  • 正确处理编码：使用decodeURIComponent解码URL编码的文件名
  • 添加错误处理：捕获并处理解码过程中可能出现的异常
  • 考虑浏览器兼容性：处理不同浏览器对响应头的解析差异

2. 下载方式选择

  • 小文件或简单格式：可以考虑前端生成
  • 大文件或复杂格式：优先使用服务端生成
  • 需要应用业务逻辑的场景：使用服务端生成
  • 离线场景：使用前端生成并本地保存

3. 用户体验优化

  • 提供下载进度提示：特别是对于大文件
  • 添加成功/失败反馈：通过消息提示告知用户下载状态
  • 提供多种格式选择：让用户根据需要选择合适的格式
  • 添加文件预览选项：在某些场景下允许用户在下载前预览

4. 安全考虑

  • 验证文件内容：确保下载的是预期的文件类型
  • 限制下载大小：防止恶意大文件攻击
  • 添加权限控制：确保只有授权用户可以下载敏感数据
  • 考虑加密保护：对敏感数据进行加密

总结

通过本文的详细介绍，我们可以看到前端处理表格文件下载有多种方案，每种方案都有其适用场景和优缺点。在实际项目中，我们需要根据具体需求选择合适的方案，并注意处理各种边缘情况和异常情况。

HTTP响应头在文件下载过程中扮演着至关重要的角色。正确理解和处理Content-Type、Content-Disposition、CORS相关头部、缓存控制头部和安全相关头部，是实现可靠文件下载功能的关键。

无论是使用XMLHttpRequest、Fetch API还是前端库生成文件，正确处理HTTP响应头、文件名编码和浏览器兼容性都是实现可靠文件下载功能的关键。同时，良好的用户体验和适当的安全措施也是不可忽视的重要因素。

希望这篇文章能为大家提供一些实用的参考和思路，帮助大家在项目中实现更加完善的表格文件下载功能。

相关推荐
Clockwiseee9 分钟前
js原型链污染
开发语言·javascript·原型模式
仙魁XAN29 分钟前
Flutter 学习之旅 之 flutter 在设备上进行 全面屏 设置/隐藏状态栏/隐藏导航栏 设置
前端·学习·flutter
hrrrrb1 小时前
【CSS3】化神篇
前端·css·css3
木木黄木木1 小时前
HTML5拼图游戏开发经验分享
前端·html·html5
BBbila1 小时前
小程序主包方法迁移到分包-调用策略
开发语言·javascript·微信小程序
不能只会打代码2 小时前
六十天前端强化训练之第十七天React Hooks 入门：useState 深度解析
前端·javascript·react.js
何包蛋H2 小时前
分享vue好用的pdf 工具实测
javascript·vue.js·pdf
PagiHi2 小时前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js
曾富贵2 小时前
【eslint 插件】导入语句排序
前端·eslint
NaZiMeKiY2 小时前
HTML5前端第八章节
前端·html·html5
热门推荐
01从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek各版本说明与优缺点分析04KGG转MP3工具|非KGM文件|解密音频05DeepSeek RAGFlow构建本地知识库系统06本地部署DeepSeek教程（Mac版本）07Windows 11 安装 Dify 完整指南 非docker环境08如何本地部署AI智能体平台，带你手搓一个AI Agent09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具