Angular中使用HttpClient下载文件无法触发浏览器原生进度条问题

你的问题核心在于：当前通过HttpClient将文件下载为Blob后再调用FileSaver保存，本质是先把文件完整加载到前端内存，再触发本地保存——浏览器仅在Blob生成完成后才会弹出下载提示，自然无法显示原生下载进度。要触发浏览器自带的进度条，必须让浏览器直接处理下载请求，而非通过JS中转Blob。

可行解决方案 #

方案1：直接让浏览器发起下载请求（推荐） #

这种方式需要后端配合传递授权信息，让浏览器能直接发起合法请求：

• 如果后端支持将JWT等授权信息存入HttpOnly Cookie，浏览器会自动在请求中带上Cookie，无需手动设置请求头：

getFileAsAttachment(fileID: string) {
  const downloadUrl = `${this.fileDownloadApi}${fileID}`;
  const link = document.createElement('a');
  link.href = downloadUrl;
  // 文件名由后端返回的Content-Disposition头指定，无需手动设置download属性
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

• 若后端允许临时将Token放在URL参数中（不推荐，存在安全风险），可直接拼接URL后用<a>标签触发下载。

方案2：通过Service Worker拦截请求添加授权头 #

注册Service Worker，拦截前端发起的下载请求并自动注入Authorization头，这样仍可使用<a>标签触发下载，浏览器会直接处理并显示原生进度。这种方式无需修改前端核心下载逻辑，但需要额外配置Service Worker，适合大型项目。

关键原理说明 #

浏览器的原生下载进度条仅对浏览器主动发起的下载请求生效（比如点击链接、window.open打开下载地址）。而你当前的做法是通过JS将文件下载到内存Blob中，再触发本地保存——这个过程属于前端内存到本地磁盘的写入操作，不属于浏览器的“下载流程”，因此不会触发原生进度条。

内容的提问来源于stack exchange，提问作者Mukit Hasan Pranto