3

I have an angular page where I display a PDF inside an iframe with:

<iframe id="documentFrame" width="100%" height="600" [src]="documentData" *ngIf="documentData"></iframe>

My pdf is a blob fetched from an API with:

 getDocument(id: number): Observable<Blob> {
    return this.http.get<any>(environment.apiUrl + '/api/documents/' + id, { responseType: 'blob' as 'json', observe: 'response' }).pipe(
      map((result: HttpResponse<Blob>) => {
        return result.body;
      }));
  }

And to fill my iframe with my blob, I make:

this.dataService.getDocument(doc.id)
        .subscribe(res => {
          this.documentUrl = URL.createObjectURL(res);
          this.documentData = this.sanitizer.bypassSecurityTrustResourceUrl(this.documentUrl);
        });

It's working well for display. But as you can see below, the generated url is not pretty and if I click on save, the default filename is the random name: filename prob

Is there a way to specificy a filename with this solution? It seems that a blob have only a size and a binary content, and I didn't see any way to parametize the generated URL.. Thanks for your help !

valerossi46
  • 153
  • 1
  • 3
  • 10
  • i believe it is already answered [here](https://stackoverflow.com/questions/19327749/javascript-blob-filename-without-link) . also you should remove your `'blob' as 'json'` hack. issue exists because you are using `http.get` generic here. leave just `http.get(...)` and the type problem is gone – Andrei Sep 28 '20 at 10:59
  • Thanks for your answer. I removed the "as json" like you said.But unless if i missed something, this exemple is based on the "download" attribute of . In my case, i want to show the pdf in a inner frame without force user to download it... – valerossi46 Sep 28 '20 at 11:27
  • you can click that link via code by `link.click()`. that looks like a hack, but it seems there is no perfect way to implement what you are trying to do – Andrei Sep 28 '20 at 11:33
  • It will result in a file dowload on the browser but that's not what I need. My PDF is correctly displayed in my inner frame, the only thing that I would like to change is the filename displayed in the header of the pdf-viewer integrated to the browser, and consequently the default filename proposed when i click on the download button of the pdf-viewer (cf sceenshot). – valerossi46 Sep 28 '20 at 11:48
  • ah, I see. could you try to recreate blob with a title option? `new Blob([oldBlob], { type: 'application/pdf', title: 'my title ' })` – Andrei Sep 28 '20 at 11:53
  • No, title is not accepted in the type 'BlobPropertyBag'. According to https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob, only type and endings exists. Any other idea? – valerossi46 Sep 28 '20 at 12:55
  • Hi @valerossi46, did you get this resolved. If so can you please share how. – Asif Karim Bherani Apr 12 '23 at 21:36

0 Answers0