使用 httpClient 和 Angular 下载 .tar 文件

Question

我正在尝试在 Angular 中使用 HttpClient 下载 .tar 文件。我首先尝试的是一个正常的请求。与处理普通文本文件的过程相同，但这没有用。它 returns 一个 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 失败响应，我也遇到了导入问题

例如

Cannot find name 'RequestOptions'

"Property 'catch' does not exist on type 'Observable"

Cannot find name '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 文件的正确方法是什么？关于我做错了什么的一些解释也很好。

Answer 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() 方法。

Answer 2

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

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)
}

使用 httpClient 和 Angular 下载 .tar 文件

Downloading a .tar file with httpClient and Angular

tar

httpclient

angular