Angular如何下载1GB大文件？有无替代file-saver的方案？

嘿，我来帮你搞定这个大文件下载的问题！不用非得吊死在file-saver这棵树上~ 原生的浏览器API结合Angular的工具就能完美处理1GB级别的Blob文件下载，还不会有内存溢出的困扰。下面给你分享几个实用的方法：

方法一：用Angular HttpClient + 原生a标签直接下载 #

这是最省心的方案，完全不需要第三方包，而且浏览器原生的下载机制会帮你处理大文件的内存问题：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FileDownloadService {
  constructor(private http: HttpClient) {}

  downloadLargeFile(fileUrl: string, saveFileName: string): void {
    // 注意设置responseType为'blob'，确保接收后端返回的Blob数据
    this.http.get(fileUrl, { responseType: 'blob', observe: 'response' }).subscribe({
      next: (response) => {
        // 从响应头获取文件类型，没有的话就用默认的二进制流类型
        const fileType = response.headers.get('Content-Type') || 'application/octet-stream';
        // 构建Blob对象
        const fileBlob = new Blob([response.body!], { type: fileType });
        
        // 创建临时的文件URL
        const tempUrl = window.URL.createObjectURL(fileBlob);
        
        // 创建隐藏的a标签触发下载
        const downloadLink = document.createElement('a');
        downloadLink.style.display = 'none';
        downloadLink.href = tempUrl;
        downloadLink.download = saveFileName;
        
        document.body.appendChild(downloadLink);
        downloadLink.click();
        
        // 下载完成后清理资源，避免内存泄漏
        window.URL.revokeObjectURL(tempUrl);
        document.body.removeChild(downloadLink);
      },
      error: (error) => {
        console.error('文件下载出错啦:', error);
        // 这里可以加个用户提示，比如弹出错误弹窗
      }
    });
  }
}

这个方法的核心是让浏览器直接处理文件写入，不会把整个1GB的文件都塞进应用内存里，所以完全不用担心大小限制。

方法二：分块流式下载（适合超大型文件） #

如果你的后端支持Range请求（也就是可以按字节范围返回文件片段），可以用分块下载的方式进一步降低内存占用，把大文件拆成多个小块逐个下载，最后合并成完整文件：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FileDownloadService {
  constructor(private http: HttpClient) {}

  async downloadLargeFileInChunks(fileUrl: string, saveFileName: string, chunkSize = 5 * 1024 * 1024): Promise<void> {
    try {
      // 先通过HEAD请求获取文件总大小
      const fileSize = await this.getTotalFileSize(fileUrl);
      let currentStart = 0;
      const blobParts: BlobPart[] = [];

      const downloadChunk = () => {
        const currentEnd = Math.min(currentStart + chunkSize - 1, fileSize - 1);
        this.http.get(fileUrl, {
          headers: { Range: `bytes=${currentStart}-${currentEnd}` },
          responseType: 'blob'
        }).subscribe({
          next: (chunkBlob) => {
            blobParts.push(chunkBlob);
            currentStart = currentEnd + 1;
            if (currentStart < fileSize) {
              // 继续下载下一块
              downloadChunk();
            } else {
              // 所有块下载完成，合并成完整Blob并触发下载
              const fullBlob = new Blob(blobParts);
              const tempUrl = window.URL.createObjectURL(fullBlob);
              const downloadLink = document.createElement('a');
              downloadLink.href = tempUrl;
              downloadLink.download = saveFileName;
              document.body.appendChild(downloadLink);
              downloadLink.click();
              window.URL.revokeObjectURL(tempUrl);
              document.body.removeChild(downloadLink);
            }
          },
          error: (error) => {
            console.error('分块下载出错:', error);
          }
        });
      };

      downloadChunk();
    } catch (error) {
      console.error('获取文件信息失败:', error);
    }
  }

  // 辅助方法：获取文件总大小
  private getTotalFileSize(fileUrl: string): Promise<number> {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.open('HEAD', fileUrl);
      xhr.onload = () => {
        if (xhr.status === 200) {
          const contentLength = xhr.getResponseHeader('Content-Length');
          resolve(contentLength ? parseInt(contentLength, 10) : 0);
        } else {
          reject(new Error('无法获取文件大小'));
        }
      };
      xhr.onerror = () => reject(new Error('请求失败'));
      xhr.send();
    });
  }
}

这种方式每一次只加载一小部分文件到内存，对于特别大的文件（比如超过1GB）会更友好。

为什么file-saver会有大小限制？ #

其实file-saver底层也是用createObjectURL或者data URL实现的，但它在处理超大文件时，会把整个Blob都加载到应用内存里，很容易触发内存溢出。而我们上面用的原生方法，是让浏览器直接接管文件的下载流程，不会占用应用的内存空间，所以完全没有大小限制。

所以你完全不需要局限于file-saver，用上面的原生方案就可以完美解决问题啦！

内容的提问来源于stack exchange，提问作者Roman