🌟 前端文件下载全攻略：从基础到高级的完整解决方案

文件下载是Web开发中的常见需求，但不同场景需要不同的技术方案。本文将系统介绍前端实现文件下载的各种方法，帮助你根据实际需求选择最佳方案。

一、基础下载方案：简单快捷

标签的download属性

适用场景：静态资源下载、已知URL的同源文件

<a href="/files/report.pdf" download="年度报告.pdf">下载PDF</a>

优点：

• 零JavaScript实现
• 语义化最佳实践
• 现代浏览器全面支持

缺点：

• 跨域资源可能失效
• 无法自定义请求头
• 不支持动态内容生成

编程式导航下载

// 方法一：当前窗口跳转
window.location.href = '/download?fileId=123';

// 方法二：新窗口打开（可能被拦截）
window.open('/download?fileId=123', '_blank');

关键要求：服务器需设置响应头

Content-Disposition: attachment; filename="file.pdf"
Content-Type: application/octet-stream

二、中级方案：API驱动的下载

Fetch API + Blob方案

适用场景：需要认证、动态内容或API返回的二进制数据

async function downloadFile() {
  try {
    const response = await fetch('/api/download', {
      headers: { 'Authorization': 'Bearer xxx' }
    });
    
    if (!response.ok) throw new Error('下载失败');
    
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    
    const a = document.createElement('a');
    a.href = url;
    a.download = '自定义文件名.pdf';
    document.body.appendChild(a);
    a.click();
    
    setTimeout(() => {
      URL.revokeObjectURL(url);
      a.remove();
    }, 100);
  } catch (error) {
    console.error('下载错误:', error);
    alert('文件下载失败，请重试');
  }
}

优势：

• 完全控制请求过程
• 支持认证和自定义头
• 可处理各种响应类型
• 可实现进度监控

大文件分块下载（提升用户体验）

// 使用Streams API处理大文件
async function streamDownload() {
  const response = await fetch('/large-file');
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  
  const chunks = [];
  while(true) {
    const {done, value} = await reader.read();
    if (done) break;
    
    chunks.push(value);
    receivedLength += value.length;
    updateProgress(receivedLength / contentLength);
  }
  
  const blob = new Blob(chunks);
  // ...后续下载逻辑
}

三、高级场景解决方案

前端生成文件下载

生成CSV文件示例

function downloadCSV(data) {
  const csvContent = data.map(row => 
    Object.values(row).join(',')
  ).join('\n');
  
  const blob = new Blob([csvContent], { type: 'text/csv' });
  const url = URL.createObjectURL(blob);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = 'data.csv';
  a.click();
}

Canvas图像下载

function downloadCanvas(canvas, filename) {
  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename || 'image.png';
    a.click();
  }, 'image/png', 1.0);
}

特殊文件类型处理

ZIP多文件打包下载

// 使用JSZip库
async function downloadAsZip(files) {
  const zip = new JSZip();
  
  files.forEach(file => {
    zip.file(file.name, file.content);
  });
  
  const content = await zip.generateAsync({ type: 'blob' });
  const url = URL.createObjectURL(content);
  
  const a = document.createElement('a');
  a.href = url;
  a.download = 'archive.zip';
  a.click();
}

四、企业级最佳实践

安全增强方案

<!--添加SRI校验（适用于静态资源）-->
<a href="/secure-file" 
   download
   integrity="sha384-xxx"
   crossorigin="anonymous">安全下载</a>

下载管理器实现

class DownloadManager {
  constructor() {
    this.queue = [];
    this.activeDownloads = 0;
    this.maxConcurrent = 3;
  }
  
  add(downloadTask) {
    this.queue.push(downloadTask);
    this.processQueue();
  }
  
  processQueue() {
    while (this.activeDownloads < this.maxConcurrent && this.queue.length) {
      const task = this.queue.shift();
      this.activeDownloads++;
      
      task().finally(() => {
        this.activeDownloads--;
        this.processQueue();
      });
    }
  }
}

// 使用示例
const manager = new DownloadManager();
manager.add(() => downloadFile('/file1'));
manager.add(() => downloadFile('/file2'));

五、方案选择指南

场景	推荐方案	备选方案
静态资源下载	<a> 标签 download 属性	window.location
需要认证的API下载	Fetch + Blob	XHR+Blob
大文件下载	Fetch Streams API	分块 XHR
前端生成内容	Blob + ObjectURL	FileSaver.js 库
多文件打包	JSZip 库	服务端打包

六、常见问题解决

Q1：Safari下载异常？

• 确保服务器配置正确的MIME类型
• 对于Blob下载，添加 setTimeout 延迟 revokeObjectURL

Q2：移动端兼容性问题？

• 安卓Chrome可能需要用户手势触发
• iOS可能限制程序化下载，需直接用户操作

Q3：文件名乱码？

// 使用encodeURIComponent处理中文文件名
a.download = encodeURIComponent('中文文件.pdf');