Открыть pdf файл в новой вкладке в Angular - PullRequest
0 голосов
/ 19 июня 2020

Я пытаюсь реализовать открытие PDF-файла в новой вкладке в Angular 9. Я получаю файл из api как blob. Но поскольку window.URL.createObjectURL(blob); устарел, я получаю эту ошибку Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.. Я увидел, что теперь я должен использовать MediaStream() для его операций, но я не могу понять, как заставить его работать с blob.

Мой код теперь выглядит так, но в нем отсутствует основная часть :

downloadFile() {
    console.log('File download started.');
    const blob = this.agreementService.getPdfReport(this.agreementNumber);

    // Deprecated part
    const url = window.URL.createObjectURL(blob);
    const link = this.downloadZipLink.nativeElement;
    link.href = url;
    link.download = 'Agreement.pdf';
    link.click();
    window.URL.revokeObjectURL(url);
}

соглашение.service.ts:

    getPdfReport(agreementNumber: string){
    this.requestUrl = `${configs.api}v1/reports/${agreementNumber}/Agreement.pdf`;
    let headers = new HttpHeaders();
    headers = headers.set('Accept', 'application/pdf');
    return this.http.get(this.requestUrl, {headers, responseType: 'blob'});
  }

1 Ответ

0 голосов
/ 19 июня 2020

Сделал собственное решение из пары ответов. Если я что-то не так делаю, поправьте меня в комментариях.

соглашение.service.ts:

  getPdfReport(agreementNumber: string) {
    this.requestUrl = `${configs.api}v1/reports/${agreementNumber}/Agreement.pdf`;
    return this.http.get(this.requestUrl, { responseType: 'blob', observe: 'response'}).pipe(
      map((res: any) => {
        return new Blob([res.body], { type: 'application/pdf' });
      })
    );
  }

соглашение.component.ts:

this.agreementService.getPdfReport(this.agreementNumber).subscribe(res => {
  const fileURL = URL.createObjectURL(res);
  window.open(fileURL, '_blank');
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...