Angular 10文件下载

Question

使用此函数接收数据的服务

  import { RequestOptions, ResponseContentType, Http } from '@angular/http';
import { map } from 'rxjs/operators';
    constructor(private http: Http) { }

    downloadFile(id): Observable<Blob> {
        let options = new RequestOptions({responseType: ResponseContentType.Blob });
        return this.http.get(this.baseUrl + `coursepurchased/receipt/` + bookingId, options)
        .pipe(map(res => res.blob()))
    }

组件使用“file-saver”分析blob

import {saveAs as importedSaveAs} from "file-saver";
 getCourseReceipt(bookingId) {
    this.studentInfoService.getCourseInvoice(bookingId).subscribe(
      blob => {
        var fileName = 'test.pdf';
        importedSaveAs(blob, fileName)
      },
      error => {
        console.log(error);
        this.alertService.showAlert(error.message, "error");
      }
    );
  }

这是我的angular 6版本下载代码..after，我已经升级到10 RequestOptions弃用/

请给我另一个解决方案..

Answer 1

这是的get方法(取自http.d.ts)：

get<T>(url: string, options?: {
        headers?: HttpHeaders | {
            [header: string]: string | string[];
        };
        observe?: 'body';
        params?: HttpParams | {
            [param: string]: string | string[];
        };
        reportProgress?: boolean;
        responseType?: 'json';
        withCredentials?: boolean;
    }): Observable<T>;

因此，您可以执行以下操作：

downloadFile(id): Observable<Blob> {
    return this.http.get(this.baseUrl + `coursepurchased/receipt/` + bookingId, { responseType: "blob" });
}

该组件应如下所示：

getCourseReceipt(bookingId) {
    this.studentInfoService.getCourseInvoice(bookingId).subscribe(
      response => {
        var fileName = 'test.pdf';
        let blob:any = new Blob([response], { type: 'application/pdf; charset=utf-8' });
        importedSaveAs(blob, fileName)
      },
      error => {
        console.log(error);
        this.alertService.showAlert(error.message, "error");
      }
    );
  }