0

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.

K J
  • 8,045
  • 3
  • 14
  • 36
Arya Chauhan
  • 1
  • 1
  • use the `DomSanitizer` https://stackoverflow.com/questions/38037760/how-to-set-iframe-src-without-causing-unsafe-value-exception – W.S. Nov 15 '22 at 10:49
  • Seen the previous comments, it will be related to the `Content-Disposition` metadata. Make sure you set `ContentDisposition` to `inline` to get a view url instead of a download url (see: https://stackoverflow.com/questions/46690640/force-s3-pdf-to-be-viewed-in-browser-instead-of-download and https://docs.aws.amazon.com/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html) – W.S. Nov 15 '22 at 14:03

2 Answers2

0

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.

Fabian Strathaus
  • 3,192
  • 1
  • 4
  • 26
  • Thanks Fabian Strathaus, but pdf is still downloading instead of rendering in iframe. However, If I open the pdf url in new tab, the pdf is getting download again and does not render on web browser. – Arya Chauhan Nov 15 '22 at 12:23
  • Can you try a different browser or provide a reproducible stackblitz example? I am not able to reproduce this. – Fabian Strathaus Nov 15 '22 at 12:26
0

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>
Vendhan
  • 1
  • 1
  • Thanks Vendhan,I used your suggested code but pdf is still downloading instead of rendering in iframe. However, If I open the pdf url in new tab, the pdf is getting download again and does not render on web browser. – Arya Chauhan Nov 15 '22 at 12:24
  • I am receiving `changingThisBreaksApplicationSecurity` key with value as my pdfUrl when pdfUrl is passed through `this.sanitizer.bypassSecurityTrustResourceUrl` function and on UI pdf is getting download without rendering in iframe. – Arya Chauhan Nov 15 '22 at 12:47