'<iframe> downloads pdf file instead of displaying

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?

Solution 1:^[1]

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>

Solution 2:^[2]

The thing is that i was rendering a pdf which was over https and all i was getting is CORS error all the time

I just added a meta tag in the index.html file as in the section:

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

and in the page/module where i wanted to display it is as below:

  <object data="your_url_to_pdf" type="application/pdf">
     <iframe src="https://docs.google.com/viewer? 
     url=your_url_to_pdf&embedded=true"
     frameborder="0" webkitallowfullscreen mozallowfullscreen 
     allowfullscreen>
     </iframe>
  </object>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'<iframe> downloads pdf file instead of displaying

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]