downloads pdf file instead of displaying</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2018-05-31T11:57:54.080" class="fromnow">May 31 '18 at 11:57</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-04-14T23:45:39.160" datetime="2022-04-14T23:45:39.160">Apr 14 '22 at 23:45</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 16,903 times"> <span class="fc-light mr2">Viewed</span> 1.7k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="50623778" data-ownerid="9855057" data-score="4"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="50623778"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="4">4</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>This is my component.html</p> <pre><code> <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> </code></pre> <p>When this component opens in my browser (<strong>Chrome</strong>), the pdf is downloaded instead of display. The <code>frameSrc</code> is coming from a parent component which I'm assigning as the <code>[src]</code>. I want to display the pdf instead of downloading. I did some research and found out the <code>Content-Disposition</code> is <code>attachment</code> in my browser default. How could I change this so this works on every browser? </p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/angular" class="post-tag js-gps-track" title="show questions tagged 'angular'" rel="tag">angular</a> <a href="../../questions/tagged/pdf" class="post-tag js-gps-track" title="show questions tagged 'pdf'" rel="tag">pdf</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/display" class="post-tag js-gps-track" title="show questions tagged 'display'" rel="tag">display</a> <a href="../../questions/tagged/content-disposition" class="post-tag js-gps-track" title="show questions tagged 'content-disposition'" rel="tag">content-disposition</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 31 '18 at 12:11">edited May 31 '18 at 12:11</time> <a href="../../users/5695162/vikas" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5695162.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Vikas" /> </a> <div class="s-user-card--info"> <a href="../../users/5695162/vikas" class="s-user-card--link">Vikas</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,859</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="45 silver badges">45</li> <li class="s-award-bling s-award-blingbronze" title="69 bronze badges">69</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 31 '18 at 11:57">asked May 31 '18 at 11:57</time> <a href="../../users/9855057/tejashri-patange" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9855057.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tejashri Patange" /> </a> <div class="s-user-card--info"> <a href="../../users/9855057/tejashri-patange" class="s-user-card--link">Tejashri Patange</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">329</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="24 bronze badges">24</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">2 Answers<span style="display:none;" itemprop="answerCount">2</span></h2> </div> </div> </div> <a name="50625621"></a> <div id="answer-50625621" class="answer " data-answerid="50625621" data-ownerid="2813224" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="50625621"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><ul> <li><p>I don't understand why there's brackets around an attribute: <code>[src]</code> If you don't already know: Don't do that.</p> </li> <li><p><code><iframe></code> doesn't have <code>type</code> as a valid attribute, but <code>type</code> does work for <code><iframe></code>'s sister tags <code><object></code> and <code><embed></code>.</p> </li> </ul> <p>The following Demo does not function on SO due to their restrictive sandbox. Go to this <s><strong>Plunker</strong></s> to see a functional Demo. Source PDF courtesy of <strong><a class="external-link" href="https://pdfobject.com/static.html" rel="nofollow noreferrer">PDFObject</a></strong></p> <hr/> <s>Plunker</s> --- Demo ==== <p><em><strong>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).</strong></em></p> <hr/> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><!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></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2022-04-14T23:45:39.160" class="relativetime">Apr 14 '22 at 23:45</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">zer00ne</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 31 '18 at 13:34">answered May 31 '18 at 13:34</time> <a href="../../users/2813224/zer00ne" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2813224.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="zer00ne" /> </a> <div class="s-user-card--info"> <a href="../../users/2813224/zer00ne" class="s-user-card--link">zer00ne</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">41,936</li> <li class="s-award-bling s-award-blinggold" title="6 gold badges">6</li> <li class="s-award-bling s-award-blingsilver" title="41 silver badges">41</li> <li class="s-award-bling s-award-bling__bronze" title="68 bronze badges">68</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-50625621" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="50625621" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-92176952" class="comment js-comment " data-comment-id="92176952" data-comment-owner-id="8398087" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment92176952_50625621"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">in my case my link doesn't work, i go your demo and replace my link PDF to yours and still doesn't work, please help me to fix my problem.</span> – <a href="../../users/8398087/ehsan" title="308 reputation" class="comment-user ">Ehsan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/50623778/iframe-downloads-pdf-file-instead-of-displaying#comment92176952_50625621"><span title="2018-10-03T07:16:18.230 License: CC BY-SA 4.0" class="relativetime-clean">Oct 03 '18 at 07:16</span></a></span> </div> </div> </li> <li id="comment-92195034" class="comment js-comment " data-comment-id="92195034" data-comment-owner-id="2813224" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment92195034_50625621"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I cut and paste the url to the browser address bar, so it works with a PDF plugin, but I understand you need to be accessible to a greater range of users. What I believe is the problem is that the server it's on doesn't run on a secure protocol. Cut and paste the url in an address bar but before you open the URL, add an `s` to `http:` => `https:`</span> – <a href="../../users/2813224/zer00ne" title="41,936 reputation" class="comment-user ">zer00ne</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/50623778/iframe-downloads-pdf-file-instead-of-displaying#comment92195034_50625621"><span title="2018-10-03T15:40:16.357 License: CC BY-SA 4.0" class="relativetime-clean">Oct 03 '18 at 15:40</span></a></span> </div> </div> </li> <li id="comment-92281000" class="comment js-comment " data-comment-id="92281000" data-comment-owner-id="8398087" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment92281000_50625621"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">tanks alot for your answer, i install a module to my application and fix the problem. this is my module: https://github.com/vadimdez/ng2-pdf-viewer</span> – <a href="../../users/8398087/ehsan" title="308 reputation" class="comment-user ">Ehsan</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/50623778/iframe-downloads-pdf-file-instead-of-displaying#comment92281000_50625621"><span title="2018-10-06T04:59:44.270 License: CC BY-SA 4.0" class="relativetime-clean">Oct 06 '18 at 04:59</span></a></span> </div> </div> </li> <li id="comment-102036883" class="comment js-comment " data-comment-id="102036883" data-comment-owner-id="9855057" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment102036883_50625621"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">ng2-pdf-viewer is used to load local pdf not the one over https</span> – <a href="../../users/9855057/tejashri-patange" title="329 reputation" class="comment-user owner">Tejashri Patange</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/50623778/iframe-downloads-pdf-file-instead-of-displaying#comment102036883_50625621"><span title="2019-09-05T09:33:52.390 License: CC BY-SA 4.0" class="relativetime-clean">Sep 05 '19 at 09:33</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="57802578"></a> <div id="answer-57802578" class="answer " data-answerid="57802578" data-ownerid="9855057" data-score="-3" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="57802578"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-3">-3</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The thing is that i was rendering a pdf which was over https and all i was getting is CORS error all the time</p> <p>I just added a meta tag in the index.html file as in the section:</p> <pre><code><meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> </code></pre> <p>and in the page/module where i wanted to display it is as below:</p> <pre><code> <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> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2019-09-05T10:20:30.440" class="relativetime">Sep 05 '19 at 10:20</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Tejashri Patange</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Sep 05 '19 at 09:37">answered Sep 05 '19 at 09:37</time> <a href="../../users/9855057/tejashri-patange" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9855057.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Tejashri Patange" /> </a> <div class="s-user-card--info"> <a href="../../users/9855057/tejashri-patange" class="s-user-card--link">Tejashri Patange</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">329</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="24 bronze badges">24</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>