Angular：如何从 HttpClient 下载文件？

Question

我需要从我的后端下载一个 excel，它返回一个文件。

当我提出请求时，我收到错误：

TypeError：您在预期流的位置提供了“未定义”。您可以提供 Observable、Promise、Array 或 Iterable。

我的代码是：

 this.http.get(`${environment.apiUrl}/...`)
      .subscribe(response => this.downloadFile(response, "application/ms-excel"));

我试过 get 和 map(…) 但没有用。

细节： 角度5.2

参考：

 import { HttpClient } from '@angular/common/http';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/finally';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/catch';

响应的内容类型：

 Content-Type: application/ms-excel

怎么了？

原文由 Jean Carlos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试这样的事情：

类型：应用程序/ms-excel

 /**
 *  used to get file from server
 */

this.http.get(`${environment.apiUrl}`,{
          responseType: 'arraybuffer',headers:headers}
         ).subscribe(response => this.downLoadFile(response, "application/ms-excel"));

    /**
     * Method is use to download file.
     * @param data - Array Buffer data
     * @param type - type of the document.
     */
    downLoadFile(data: any, type: string) {
        let blob = new Blob([data], { type: type});
        let url = window.URL.createObjectURL(blob);
        let pwa = window.open(url);
        if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {
            alert( 'Please disable your Pop-up blocker and try again.');
        }
    }

原文由 Akj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可能是我迟到了。但是@Hasan 的最后一个回答非常棒。

我只是在此进行了一些更改（这不接受如此删除的标题）并获得了成功。

 downloadFile(route: string, filename: string = null): void {
    // const baseUrl = 'http://myserver/index.php/api';
    this.http.get(route, { responseType: 'blob' }).subscribe(
      (response: any) => {
        let dataType = response.type;
        let binaryData = [];
        binaryData.push(response);
        let downloadLink = document.createElement('a');
        downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, { type: dataType }));
        if (filename) {
          downloadLink.setAttribute('download', filename);
        }
        document.body.appendChild(downloadLink);
        downloadLink.click();
      }
    )
  }

原文由 Deepak Dholiyan 发布，翻译遵循 CC BY-SA 4.0 许可协议