downloads pdf file instead of displaying

Question

This is my component.html

    <iframe [src]="frameSrc | safe"  class="frameSet" type="application/pdf"
     frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
     This browser does not support PDFs. Please download the PDF to view it: 
     <a href="frameSrc | safe">Download PDF</a>
   </iframe>

When this component opens in my browser (Chrome), the pdf is downloaded instead of display. The frameSrc is coming from a parent component which I'm assigning as the [src]. I want to display the pdf instead of downloading. I did some research and found out the Content-Disposition is attachment in my browser default. How could I change this so this works on every browser?

zer00ne · Accepted Answer

I don't understand why there's brackets around an attribute: [src] If you don't already know: Don't do that.
<iframe> doesn't have type as a valid attribute, but type does work for <iframe>'s sister tags <object> and <embed>.

The following Demo does not function on SO due to their restrictive sandbox. Go to this ~~Plunker~~ to see a functional Demo. Source PDF courtesy of PDFObject

~~Plunker~~ --- Demo ====

It looks like Plunker no longer runs embeded content anymore, so if you want to review a functioning demo, simply copy and paste the entire code in any text editor (Notepad, Notepad++, etc.) and save as an HTML file (.html file extension).

<!DOCTYPE html>
<html>

<head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    figure {
      display: table;
      border: 3px ridge grey;
      position: relative;
      width: 96vw;
      min-height: 250px;
      height: auto;
      margin: 0 auto 35px;
    }
    
    figcaption {
      border: 3px ridge grey;
      text-align: center;
      font: 900 20px/1.5 Verdana;
      padding: 0 0 8px 0;
      background: rgba(51, 51, 51, 0.3);
      color: #fff;
    }
    
    iframe,
    object,
    embed {
      overflow: hidden;
      position: absolute;
    }
  </style>
</head>

<body>

  <figure>
    <figcaption>IFRAME</figcaption>
    <iframe src="https://pdfobject.com/pdf/sample-3pp.pdf#page=1" class="frameSet" frameborder="0" allowfullscreen width="100%" height="100%"></iframe>
  </figure>

  <figure>
    <figcaption>OBJECT</figcaption>
    <object data="https://pdfobject.com/pdf/sample-3pp.pdf#page=2" class="objectSet" type="application/pdf" width="100%" height="100%"></object>
  </figure>

  <figure>
    <figcaption>EMBED</figcaption>
    <embed src="https://pdfobject.com/pdf/sample-3pp.pdf#page=3" class="embedSet" type="application/pdf" width="100%" height="100%">
  </figure>

</body>


</html>

Hamid · Answer

You need to modify your URL like the below

iframeURL =  'urlThatYouGetFromAPI' + '&embedded=true'
<iframe [src]="iframeURL"></iframe>

Actually, All you need is adding this string &embedded=true to the end of URL.

Also you can use domSanatizer to make it more safe

 readonly #domSanitizer = inject(DomSanitizer);
 iframeURL = this.#domSanitizer.bypassSecurityTrustResourceUrl(
                `${URL}&embedded=true`
            );

<iframe> downloads pdf file instead of displaying

Tags:

angular

pdf

iframe

display

content-disposition

Tejashri Patange

2 Answers

zer00ne

Hamid

Recent Activity

Donate For Us