Загрузка файла Angular 10

#angular

#angular

Вопрос:

сервис с этой функцией для получения данных

   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’

 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 .. после того, как я обновил рейтинг до 10, RequestOptions устарели/

Пожалуйста, помогите мне альтернативное решение..

Ответ №1:

это метод получения для (взято из 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");
      }
    );
  }
 

Комментарии:

1. вам не нужно никуда его записывать, просто замените одну строку на this.http.get второй блок, который я написал, цитата из первого блока взята из документации по методу http.get

2. я немного смущен, можете ли вы, пожалуйста, обновить DownloadFile() в ответе..

3. DownloadFile(id: number) { this.HttpClient.get(baseUrl ‘/Transaction/DownloadFile?id=’ ${id} , { responseType: «blob» }) } Правильно ли это?