How to open a PDF file in an ?</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="2012-10-19T12:15:10.403" class="fromnow">Oct 19 '12 at 12:15</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2021-03-09T14:15:47.550" datetime="2021-03-09T14:15:47.550">Mar 09 '21 at 14:15</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 285,178 times"> <span class="fc-light mr2">Viewed</span> 2.9e+01k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="12974115" data-ownerid="1753210" data-score="36"> <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="12974115"> <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="36">36</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="0">0</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I want to open the pdf file in an iframe. I am using following code:</p> <pre><code><a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"> User guide </a> </code></pre> <p>It is opening fine in Firefox, but it is not opening in IE8.</p> <p>Does anyone know how to make it work also for IE ?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</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/browser" class="post-tag js-gps-track" title="show questions tagged 'browser'" rel="tag">browser</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 Dec 02 '20 at 13:53">edited Dec 02 '20 at 13:53</time> <a href="../../users/7186739/billu" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7186739.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Billu" /> </a> <div class="s-user-card--info"> <a href="../../users/7186739/billu" class="s-user-card--link">Billu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,733</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="47 bronze badges">47</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 Oct 19 '12 at 12:15">asked Oct 19 '12 at 12:15</time> <a href="../../users/1753210/user1753210" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1753210.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user1753210" /> </a> <div class="s-user-card--info"> <a href="../../users/1753210/user1753210" class="s-user-card--link">user1753210</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">421</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="5 silver badges">5</li> <li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-12974115" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="12974115" 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-17594019" class="comment js-comment " data-comment-id="17594019" data-comment-owner-id="328193" data-comment-score="5"> <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">5</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment17594019_12974115"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">1) The `class` attribute value should be in quotes. 2) What on earth is that jQuery-ish attribute? 3) In what way are you indicating that this should be in an `iframe` at all?</span> – <a href="../../users/328193/david" title="208,112 reputation" class="comment-user ">David</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment17594019_12974115"><span title="2012-10-19T12:24:04.283 License: CC BY-SA 3.0" class="relativetime-clean">Oct 19 '12 at 12:24</span></a></span> </div> </div> </li> </ul> </div> </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">5 Answers<span style="display:none;" itemprop="answerCount">5</span></h2> </div> </div> </div> <a name="12974315"></a> <div id="answer-12974315" class="answer " data-answerid="12974315" data-ownerid="924643" data-score="41" 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="12974315"> <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="41">41</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Using an <code>iframe</code> to "render" a PDF will not work on all browsers; it depends on how the browser handles PDF files. Some browsers (such as Firefox and Chrome) have a built-in PDF rendered which allows them to display the PDF inline where as some older browsers (perhaps older versions of IE attempt to download the file instead).</p> <p>Instead, I recommend checking out <a class="external-link" href="http://pdfobject.com/" rel="noreferrer">PDFObject</a> which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.</p> <p>In your HTML, you could set up a <code>div</code> to display the PDFs:</p> <pre><code><div id="pdfRenderer"></div> </code></pre> <p>Then, you can have Javascript code to embed a PDF in that <code>div</code>:</p> <pre><code>var pdf = new PDFObject({ url: "https://something.com/HTC_One_XL_User_Guide.pdf", id: "pdfRendered", pdfOpenParams: { view: "FitH" } }).embed("pdfRenderer"); </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="2013-04-03T14:33:12.690" class="relativetime">Apr 03 '13 at 14:33</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">Aamir</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 Oct 19 '12 at 12:28">answered Oct 19 '12 at 12:28</time> <a href="../../users/924643/aamir" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/924643.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Aamir" /> </a> <div class="s-user-card--info"> <a href="../../users/924643/aamir" class="s-user-card--link">Aamir</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">5,324</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="30 silver badges">30</li> <li class="s-award-bling s-award-blingbronze" title="47 bronze badges">47</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-12974315" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="12974315" 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-26711916" class="comment js-comment " data-comment-id="26711916" data-comment-owner-id="225899" data-comment-score="5"> <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">5</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment26711916_12974315"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">That's the point. But it's loading the PDF into an object instead of an iframe. See http://pdfobject.com/markup/index.php</span> – <a href="../../users/225899/james-p" title="19,313 reputation" class="comment-user ">James P.</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment26711916_12974315"><span title="2013-08-14T01:49:47.413 License: CC BY-SA 3.0" class="relativetime-clean">Aug 14 '13 at 01:49</span></a></span> </div> </div> </li> <li id="comment-28043888" class="comment js-comment " data-comment-id="28043888" data-comment-owner-id="1626354" 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="comment28043888_12974315"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">What if you don't want the src path of your pdf file exposed in the objects data tag?</span> – <a href="../../users/1626354/base-desire" title="485 reputation" class="comment-user ">Base Desire</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment28043888_12974315"><span title="2013-09-24T15:02:45.283 License: CC BY-SA 3.0" class="relativetime-clean">Sep 24 '13 at 15:02</span></a></span> </div> </div> </li> <li id="comment-38532956" class="comment js-comment " data-comment-id="38532956" data-comment-owner-id="2229701" data-comment-score="9"> <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">9</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment38532956_12974315"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">well wouldn't the src path be shown in an iFrame to? ^</span> – <a href="../../users/2229701/sam" title="490 reputation" class="comment-user ">Sam</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment38532956_12974315"><span title="2014-07-18T09:21:41.877 License: CC BY-SA 3.0" class="relativetime-clean">Jul 18 '14 at 09:21</span></a></span> </div> </div> </li> <li id="comment-68529431" class="comment js-comment " data-comment-id="68529431" data-comment-owner-id="3145318" 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="comment68529431_12974315"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">can this load image file as well..?</span> – <a href="../../users/3145318/ronak-rathod" title="430 reputation" class="comment-user ">Ronak Rathod</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment68529431_12974315"><span title="2016-11-17T07:32:17.787 License: CC BY-SA 3.0" class="relativetime-clean">Nov 17 '16 at 07:32</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="12974270"></a> <div id="answer-12974270" class="answer " data-answerid="12974270" data-ownerid="1654265" data-score="21" 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="12974270"> <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="21">21</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>This is the code to link an HTTP(S) accessible PDF from an <code><iframe></code>:</p> <pre><code><iframe src="https://research.google.com/pubs/archive/44678.pdf" width="800" height="600"> </code></pre> <p>Fiddle: <a class="external-link" href="http://jsfiddle.net/cEuZ3/1545/" rel="nofollow noreferrer">http://jsfiddle.net/cEuZ3/1545/</a></p> <p>EDIT: and you can use Javascript, from the <code><a></code> tag (<code>onclick</code> event) to set iFrame' SRC attribute at run-time...</p> <p>EDIT 2: Apparently, it is a bug (but there are workarounds):</p> <p><a href="../../questions/7588262/pdf-files-do-not-open-in-internet-explorer-with-adobe-reader-10-0-users-get-an">PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?</a></p></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 Dec 01 '20 at 13:24">edited Dec 01 '20 at 13:24</time> <a href="../../users/7186739/billu" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7186739.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Billu" /> </a> <div class="s-user-card--info"> <a href="../../users/7186739/billu" class="s-user-card--link">Billu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,733</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="47 bronze badges">47</li> </ul> </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 Oct 19 '12 at 12:25">answered Oct 19 '12 at 12:25</time> <a href="../../users/1654265/andrea-ligios" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1654265.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Andrea Ligios" /> </a> <div class="s-user-card--info"> <a href="../../users/1654265/andrea-ligios" class="s-user-card--link">Andrea Ligios</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">49,480</li> <li class="s-award-bling s-award-blinggold" title="26 gold badges">26</li> <li class="s-award-bling s-award-blingsilver" title="114 silver badges">114</li> <li class="s-award-bling s-award-blingbronze" title="243 bronze badges">243</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-12974270" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="12974270" 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-17594166" class="comment js-comment " data-comment-id="17594166" data-comment-owner-id="1753210" 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="comment17594166_12974270"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Actually i have copied from the IE debugger that's why jquerry and other things are coming ...other wise the class is also within the codes. And it is working fine for mozilla ..</span> – <a href="../../users/1753210/user1753210" title="421 reputation" class="comment-user owner">user1753210</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment17594166_12974270"><span title="2012-10-19T12:29:17.173 License: CC BY-SA 3.0" class="relativetime-clean">Oct 19 '12 at 12:29</span></a></span> </div> </div> </li> <li id="comment-17594289" class="comment js-comment " data-comment-id="17594289" data-comment-owner-id="1753210" 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="comment17594289_12974270"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">i have tried your link and still if you will try to run then it will open the PDF in acrobat reader not in the iframe in IE. But if you will try the same thing in chrome or mozilla then it works fine as intended. But i want to open it in iframe for IE also</span> – <a href="../../users/1753210/user1753210" title="421 reputation" class="comment-user owner">user1753210</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment17594289_12974270"><span title="2012-10-19T12:33:23.673 License: CC BY-SA 3.0" class="relativetime-clean">Oct 19 '12 at 12:33</span></a></span> </div> </div> </li> <li id="comment-76364428" class="comment js-comment " data-comment-id="76364428" data-comment-owner-id="1073780" 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="comment76364428_12974270"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?</span> – <a href="../../users/1073780/gathole" title="892 reputation" class="comment-user ">Gathole</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment76364428_12974270"><span title="2017-06-22T05:02:36.210 License: CC BY-SA 3.0" class="relativetime-clean">Jun 22 '17 at 05:02</span></a></span> </div> </div> </li> <li id="comment-76369263" class="comment js-comment " data-comment-id="76369263" data-comment-owner-id="1654265" 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="comment76369263_12974270"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Define "does not work fine". Is it too big ? Just use `vh` and `vw` instead of `pixels`, read more: https://stackoverflow.com/a/30512369/1654265</span> – <a href="../../users/1654265/andrea-ligios" title="49,480 reputation" class="comment-user ">Andrea Ligios</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment76369263_12974270"><span title="2017-06-22T07:39:07.563 License: CC BY-SA 3.0" class="relativetime-clean">Jun 22 '17 at 07:39</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="20187903"></a> <div id="answer-20187903" class="answer " data-answerid="20187903" data-ownerid="314905" data-score="8" 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="20187903"> <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="8">8</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>It also important to make sure that the web server sends the file with Content-Disposition = inline. this might not be the case if you are reading the file yourself and send it's content to the browser:</p> <p>in php it will look like this...</p> <pre><code>...headers... header("Content-Disposition: inline; filename=doc.pdf"); ...headers... readfile('localfilepath.pdf') </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="2014-01-21T12:29:31.587" class="relativetime">Jan 21 '14 at 12:29</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">Roey</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 Nov 25 '13 at 08:36">answered Nov 25 '13 at 08:36</time> <a href="../../users/314905/roey" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/314905.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Roey" /> </a> <div class="s-user-card--info"> <a href="../../users/314905/roey" class="s-user-card--link">Roey</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,647</li> <li class="s-award-bling s-award-blingsilver" title="21 silver badges">21</li> <li class="s-award-bling s-award-blingbronze" title="16 bronze badges">16</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="66548588"></a> <div id="answer-66548588" class="answer " data-answerid="66548588" data-ownerid="2078462" data-score="0" 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="66548588"> <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="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>The direct PDF didn't work on Mobile phones and it doesn't support responsive UI. Here is the best solution. <a href="../../a/66548544#66548544">https://stackoverflow.com/a/66548544/2078462</a></p></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="answered Mar 09 '21 at 14:15">answered Mar 09 '21 at 14:15</time> <a href="../../users/2078462/aimanzaki" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2078462.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Aimanzaki" /> </a> <div class="s-user-card--info"> <a href="../../users/2078462/aimanzaki" class="s-user-card--link">Aimanzaki</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">566</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="9 bronze badges">9</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="35161166"></a> <div id="answer-35161166" class="answer " data-answerid="35161166" data-ownerid="2270382" data-score="-5" 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="35161166"> <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="-5">-5</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Do it like this: Remember to close iframe tag.</p> <pre><code><iframe src="http://samplepdf.com/sample.pdf" width="800" height="600"></iframe> </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="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Dec 02 '20 at 11:24">edited Dec 02 '20 at 11:24</time> <a href="../../users/7186739/billu" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7186739.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Billu" /> </a> <div class="s-user-card--info"> <a href="../../users/7186739/billu" class="s-user-card--link">Billu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,733</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="47 bronze badges">47</li> </ul> </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 Feb 02 '16 at 18:28">answered Feb 02 '16 at 18:28</time> <a href="../../users/2270382/atif-tariq" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2270382.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Atif Tariq" /> </a> <div class="s-user-card--info"> <a href="../../users/2270382/atif-tariq" class="s-user-card--link">Atif Tariq</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,650</li> <li class="s-award-bling s-award-blingsilver" title="27 silver badges">27</li> <li class="s-award-bling s-award-bling__bronze" title="34 bronze badges">34</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-35161166" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="35161166" 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-126630828" class="comment js-comment " data-comment-id="126630828" data-comment-owner-id="5374995" 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="comment126630828_35161166"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">because it just downloads the pdf instead of previewing</span> – <a href="../../users/5374995/vikas-kandari" title="1,612 reputation" class="comment-user ">Vikas Kandari</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/12974115/how-to-open-a-pdf-file-in-an-iframe#comment126630828_35161166"><span title="2022-03-28T17:05:42.930 License: CC BY-SA 4.0" class="relativetime-clean">Mar 28 '22 at 17:05</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/27779654/does-not-load-pdf-file-inside-iframe-in-internet-explorer" class="question-hyperlink">Does not load PDF file inside IFrame in Internet Explorer</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">-1</div></a> <a href="../../questions/29541828/how-to-read-pdf-file-from-remote-server-and-display-with-iframe" class="question-hyperlink">How to read PDF file from remote server and display with Iframe</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">3</div></a> <a href="../../questions/29971792/how-to-directly-print-a-pdf-dynamically-created-with-itextsharp-using-asp-net-" class="question-hyperlink">How to directly print a PDF dynamically created with iTextSharp using asp.net c#?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/34311793/load-pdf-file-into-jquery-tab" class="question-hyperlink">Load PDF file into jQuery tab</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">2</div></a> <a href="../../questions/36712833/could-not-find-file-c-windows-system32-inetsrv-xxx-xlsx" class="question-hyperlink">Could not find file 'c:\windows\system32\inetsrv\xxx.xlsx'</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/38241499/embedding-a-external-pdf-link-to-my-webpage-without-uploading-the-pdf-file-to-" class="question-hyperlink">Embedding a external pdf link to my webpage without uploading the pdf file to server</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/39695760/how-to-display-files-in-browser" class="question-hyperlink">How to display files in browser</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/39832618/open-pdfs-in-a-div" class="question-hyperlink">Open pdfs in a div</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/42714298/how-to-inject-a-dynamically-generated-pdf-into-a-gwt-iframe" class="question-hyperlink">how to inject a dynamically generated pdf into a gwt iframe</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/42973091/how-to-download-pdf-file-from-google-drive-and-view-it" class="question-hyperlink">How to download PDF file from Google drive and view it</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/44134317/displaying-documents-in-an-iframe-without-force-download" class="question-hyperlink">Displaying documents in an iframe without force download?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/46081557/how-to-embed-itextsharp-pdf-in-view-c-mvc-5" class="question-hyperlink">How to Embed iTextSharp PDF in View (C# - MVC 5)</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">4</div></a> <a href="../../questions/49268078/check-if-pdf-has-been-loaded" class="question-hyperlink">Check if PDF has been loaded</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">6</div></a> <a href="../../questions/50721815/ios-11-standalone-web-app-link-opening-default-reversed-handling-pdf-display-i" class="question-hyperlink">iOS 11 - standalone web app link opening default reversed? (Handling PDF display in web app.)</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">4</div></a> <a href="../../questions/53281397/pdf-in-iframe-getting-downloaded-instead-of-displaying" class="question-hyperlink">PDF in iFrame getting downloaded instead of displaying</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/57816208/how-to-open-pdf-in-iframe-when-click-on-a-tag" class="question-hyperlink">how to open pdf in iframe when click on a tag</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/58027111/firefox-don-t-display-inline-pdf" class="question-hyperlink">Firefox don't display inline pdf</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/15764670/how-to-open-pdf-in-the-browser" class="question-hyperlink">How to Open pdf in the browser</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">2</div></a> <a href="../../questions/16731918/pdf-in-iframe-flipped-90-degrees" class="question-hyperlink">PDF in iframe flipped 90 degrees</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/17721144/open-pdf-file-in-ie-without-downloading-prompt" class="question-hyperlink">Open pdf file in IE without downloading prompt</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/18406242/displaying-pdf-file-in-the-object-tag" class="question-hyperlink">Displaying PDF file in the object tag</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">8</div></a> <a href="../../questions/18888131/print-pdf-file-in-iframe-using-javascript-getting-one-page-only" class="question-hyperlink">Print PDF File in IFrame using javascript getting one page only</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/20873505/read-uploaded-file-in-struts2" class="question-hyperlink">Read uploaded file in struts2</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/21572591/struts2-streaming-video-from-byte-array-using-struts2" class="question-hyperlink">Struts2-Streaming Video From Byte Array using struts2</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/21953794/load-pdf-file-into-a-div-using-jquery-angularjs" class="question-hyperlink">Load Pdf file into a div using jQuery/AngularJs</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/21977693/show-pdf-file-within-an-asp-modalpopupextender-using-c-asp-net" class="question-hyperlink">Show PDF FILE within an asp ModalPopupExtender using C# asp.net</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">-2</div></a> <a href="../../questions/22220503/pdf-viewer-in-browser" class="question-hyperlink">Pdf viewer in browser</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/23920639/have-pdf-appear-in-html-rather-than-loading-with-adobe-or-into-separate-window" class="question-hyperlink">Have PDF appear in HTML rather than loading with Adobe or into separate window</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">6</div></a> <a href="../../questions/24755631/nav-menu-sitting-behind-iframe" class="question-hyperlink">Nav menu sitting behind iFrame</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">1</div></a> <a href="../../questions/26451985/displaying-streamed-pdf-in-iframe" class="question-hyperlink">Displaying streamed pdf in iframe</a> </div> </div> </div> <div class="module sidebar-linked"> <h4 id="h-linked">Related</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">4</div></a> <a href="../../questions/53281397/pdf-in-iframe-getting-downloaded-instead-of-displaying" class="question-hyperlink">PDF in iFrame getting downloaded instead of displaying</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>