如何通过浏览器从Firebase存储中下载文件，并在浏览器的下载页面中显示正确的扩展名和进度？

Question

我从昨晚开始在stackoverflow和google上搜索，以找到一种将文件从Firebase存储下载到浏览器的好方法。

首先在firebase存储文档中，我被要求配置cors，我使用google cloud sdk shell成功完成了配置。

然后，我寻找了在浏览器中使用javascript下载文件的方法，毕竟我找到的最佳方法就是使用以下功能

注意：我正在使用角度6

注意：：file函数中的download参数为{name:string,url:string,type:string}类型，我保存在Firebase数据库中，当用户单击文件时，该函数将被调用需要在聊天框中下载

   download(file:any):void
  {
    this.getFile(file.url)
    .subscribe(fileData => 
      {
        var a = document.createElement("a");
        document.body.appendChild(a);
       a.setAttribute("style","display:none");
      let b:any = new Blob([fileData], { type: file.type });
      var url= window.URL.createObjectURL(b);
      a.href = url;
      a.download = file.name;
      a.click();
      window.URL.revokeObjectURL(url);
      }
    );
  }

  public getFile(path: string):Observable<any>{
    return this.http.get(path, {responseType: 'blob'})
        .pipe(map((response: Blob) => <Blob>response))  ;
  }

这是我的实际问题

------ START --------

但是我仍然在寻找一种更好的下载文件的方法，因为发生的情况是，当我下载大文件时，该文件仅在整个文件之后才会显示在下载托盘或Chrome浏览器chrome://downloads/的下载页面上已下载（无论是否开始下载，都会使用户感到困惑）。我想要的是浏览器应该显示下载进度，例如文件大小为100 mb，应该在给定的时间显示，例如当前10 mb或10％已下载，并且应在用户调用后立即显示在下载托盘中download通过他在我的网站上的行为发挥作用吗？

--- END ---------

Edit-1 （我将{contentDisposition:'attachment; filename=' + file.name}用作元数据）将文件上传到Firebase存储中。

编辑2 ，我尝试将getFile函数更改为如下所示的函数，但现在控制台出现错误

  

无法加载'https://somefirebaseurl.com'：在飞行前响应中，Access-Control-Allow-Headers不允许请求标头字段的内容处置。

     public getFile(file:any):Observable<any>{
    var headers={'content-disposition':'attachment; filename=\"'+file.name+'\"'};
    console.log(headers);
    return this.http.get(file.url, {responseType: 'blob',
    headers:headers})
        .pipe(map((response: Blob) => <Blob>response))  ;
  }