Angular前端大文件下载：如何让浏览器下载管理器显示完整进度

API端配置 #

要让浏览器能显示原生下载进度，API必须补充两个关键响应头配置：

• Content-Length：返回文件的总字节数，浏览器依赖这个值计算下载进度。
• 更新Access-Control-Expose-Headers，将Content-Length加入允许暴露的头列表（跨域场景下必填，否则前端无法读取该头信息）。

保留原有的Content-Disposition头不变，确保文件名能被正确识别。最终响应头示例：

Access-Control-Expose-Headers: Content-Disposition, Content-Length
Content-Disposition: attachment; filename=TasksReport-28-10-2022.xlsx; filename*=UTF-8''Report.xlsx
Content-Length: 157286400
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

注意：如果报表是动态生成的，服务器需要预先计算好生成后文件的总大小，再返回Content-Length头。

Angular前端实现 #

不能用常规的HttpClient.get直接获取Blob（会把整个文件加载到内存后才触发下载），要改用事件监听模式，流式处理响应并触发浏览器原生下载：

1. 封装下载服务 #

import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  downloadReport(url: string): Observable<HttpEvent<Blob>> {
    const req = new HttpRequest('GET', url, {
      reportProgress: true,
      responseType: 'blob',
      observe: 'events'
    });

    return this.http.request(req);
  }
}

2. 组件中调用并处理进度与下载 #

import { Component } from '@angular/core';
import { DownloadService } from './download.service';
import { HttpEvent, HttpEventType } from '@angular/common/http';

@Component({
  selector: 'app-report-download',
  template: `
    <button (click)="startDownload()" [disabled]="isDownloading">
      {{ isDownloading ? '下载中... (' + progress + '%)' : '下载报表' }}
    </button>
  `
})
export class ReportDownloadComponent {
  isDownloading = false;
  progress = 0;

  constructor(private downloadService: DownloadService) {}

  startDownload() {
    this.isDownloading = true;
    this.progress = 0;

    this.downloadService.downloadReport('/api/reports/tasks')
      .subscribe({
        next: (event: HttpEvent<Blob>) => {
          // 处理下载进度
          if (event.type === HttpEventType.DownloadProgress) {
            if (event.total) {
              this.progress = Math.round((100 * event.loaded) / event.total);
            }
          }
          // 响应完成，触发浏览器下载
          else if (event.type === HttpEventType.Response) {
            this.saveFile(event.body as Blob, event.headers.get('Content-Disposition'));
            this.isDownloading = false;
            this.progress = 0;
          }
        },
        error: (err) => {
          console.error('下载失败', err);
          this.isDownloading = false;
          this.progress = 0;
        }
      });
  }

  private saveFile(blob: Blob, contentDisposition: string | null) {
    // 从Content-Disposition头中提取文件名
    let filename = 'report.xlsx';
    if (contentDisposition) {
      const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
      if (matches != null && matches[1]) {
        filename = matches[1].replace(/['"]/g, '');
      }
    }

    // 创建临时a标签触发原生下载
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    // 清理资源
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
  }
}

方案优势 #

• 服务器返回Content-Length后，浏览器能准确计算下载进度，同时前端可通过reportProgress事件更新UI提示。
• 响应流式返回时，浏览器下载管理器会自动识别并显示原生进度条，无需等待整个文件加载到内存。
• 保留了原有的权限验证逻辑（仍通过API请求下载），避免直接暴露文件URI带来的安全风险。

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