How can I show a pdf from pdf url in an iframe in angular. currently pdf is getting download instead-CodePudding

I have an api response which contains the amazon aws pdf link. Whenever I try to render that pdf in an iframe it gets downloaded and nothing renders inside the iframe. I don't want to use any external library like ng2-pdf-viewer.

Here is my code snippet.

<iframe [src]="pdfPreviewURL" type="application/pdf"></iframe>

Here pdfPreviewURL is the response pdf aws pdf file link.

Thanks in advance. All suggestions are welcomed.

CodePudding user response：

Of course you can. You can just set the src attribute of the iframe to the expected URL:

<iframe src="myPDFrelatedURL"></iframe>

This will render the PDF inside the iframe instead of opening it in a separate tab or downloading it.

CodePudding user response：

I think its working. TS

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
export class HTMLComponent  {

  url: string = "YOUR PDF LINK";
  urlSafe: SafeResourceUrl;

  constructor(public sanitizer: DomSanitizer) { }
  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }
}

Html:

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>