使用 httpClient 和 Angular 下载 .tar 文件答案

【问题标题】：Downloading a .tar file with httpClient and Angular使用 httpClient 和 Angular 下载 .tar 文件
【发布时间】：2019-08-26 11:34:11
【问题描述】：

我正在尝试使用 Angular 中的 HttpClient 下载 .tar 文件。我首先尝试的是一个正常的请求。与我使用普通文本文件的过程相同，但这不起作用。它返回一个 http 失败响应。

export class ApiService {

  constructor(private http: HttpClient) { }
  public getData(){
    return this.http.get(`file.tar`);
  }

接下来我尝试使用下载 excel 文件的方式，因为 .tar 包含 csv 文件：

export class ApiService {


  downloadExcel() {
    const options = new RequestOptions({
              responseType: ResponseContentType.Blob,
              headers: new Headers({ 'Accept': 'application/vnd.ms-excel' })
          });
  
    this.httpClient.get('file.tar', options)
             .catch(errorResponse => Observable.throw(errorResponse.json()))
             .map((response) => { 
                   if (response instanceof Response) {
                      return response.blob();
                   }
                   return response;
              })
             .subscribe(data => saveAs(data, 'file.tar'),
                        error => console.log(error));
  
  }   
}

这返回了更多的 http 失败响应，我也遇到了导入问题

例如

找不到名称“RequestOptions”

“‘Observable’类型上不存在属性‘catch’

找不到名称“saveAs”

我的进口是：

mport { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import { Observable, EMPTY, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

使用 Angular 和 httpClient 下载 .tar 文件的正确方法是什么？对我做错的事情进行一些解释也很好。

【问题讨论】：

第一个代码示例返回什么样的错误？
Http失败响应：0未知错误
基本上，你的 tar 文件不是application/vnd.ms-excel，它更像是application/tar mime 类型
这似乎是一个可能的解决方案，但导入问题仍然存在。
RequestOptions 自 V5 以来已弃用。 stackoverflow.com/questions/50489115/…

标签： angular httpclient tar

【解决方案1】：

您可以使用文件保护程序包https://github.com/eligrey/FileSaver.js/

export class ApiService {

downloadExcel() {
    const headers = new HttpHeaders({
      responseType: 'blob',
      headers: 'application/tar'
    });

    this.http
      .get('file.tar', { headers })
      .pipe(
        catchError(errorResponse => Observable.throw(errorResponse.json())),
        map(response => {
          if (response instanceof Response) {
            return response.blob();
          }
          return response;
        })
      )
      .subscribe(
        data => {
          const blob = new Blob(data, {
            type: 'application/tar;charset=utf-8'
          });
          FileSaver.saveAs(blob, 'file.tar');
        },
        error => console.log(error)
      );
  }   
}

编辑你必须使用 .pipe() 方法。

【讨论】：

我更新了我的答案。您还应该将 .pipe() 与 .get 方法一起使用。
我从上面的评论中了解到，RequestOptions 自 V5 以来已被弃用。 stackoverflow.com/questions/50489115/…我猜这种方法对我来说行不通
我更新了我的答案，更正了已弃用的内容。

【解决方案2】：

Observable 中没有 catch 属性。相反，您应该在 pipe() 方法中使用 rxjs/operators 中的 catchError。使用 responseType: "blob" 代替 responseType: ResponseContentType.Blob。您应该使用 Content-Type 标头而不是 Accept 标头。

downloadExcel() {

    const options = { 
        responseType: "blob",  
        headers: new HttpHeaders({ 'Content-Type': 'application/vnd.ms-excel' }) 
    };

    this.httpClient.get('file.tar', options).pipe(
            catchError(this.errorHandler('error in downloading file.'))
        ).subscribe((res: any) => {

            saveAs(res, 'file.tar');
    });
}

private errorHandler() {

    console.error(err)
}

【讨论】：