How to open a PDF file in an ?












31















I want to open the pdf file in an iframe. I am using following code:



<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"
jQuery1640737952376988841="85"> User guide </a>


It is opening fine in Firefox, but it is not opening in IE8.



Does anyone know how to make it work also for IE ?










share|improve this question




















  • 5





    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?

    – David
    Oct 19 '12 at 12:24
















31















I want to open the pdf file in an iframe. I am using following code:



<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"
jQuery1640737952376988841="85"> User guide </a>


It is opening fine in Firefox, but it is not opening in IE8.



Does anyone know how to make it work also for IE ?










share|improve this question




















  • 5





    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?

    – David
    Oct 19 '12 at 12:24














31












31








31


15






I want to open the pdf file in an iframe. I am using following code:



<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"
jQuery1640737952376988841="85"> User guide </a>


It is opening fine in Firefox, but it is not opening in IE8.



Does anyone know how to make it work also for IE ?










share|improve this question
















I want to open the pdf file in an iframe. I am using following code:



<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"
jQuery1640737952376988841="85"> User guide </a>


It is opening fine in Firefox, but it is not opening in IE8.



Does anyone know how to make it work also for IE ?







javascript html pdf iframe browser






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jun 15 '15 at 13:39









Andrea Ligios

39.8k1575170




39.8k1575170










asked Oct 19 '12 at 12:15









user1753210user1753210

186238




186238








  • 5





    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?

    – David
    Oct 19 '12 at 12:24














  • 5





    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?

    – David
    Oct 19 '12 at 12:24








5




5





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?

– David
Oct 19 '12 at 12:24





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?

– David
Oct 19 '12 at 12:24












4 Answers
4






active

oldest

votes


















37














Using an iframe 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).



Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.



In your HTML, you could set up a div to display the PDFs:



<div id="pdfRenderer"></div>


Then, you can have Javascript code to embed a PDF in that div:



var pdf = new PDFObject({
url: "https://something.com/HTC_One_XL_User_Guide.pdf",
id: "pdfRendered",
pdfOpenParams: {
view: "FitH"
}
}).embed("pdfRenderer");





share|improve this answer





















  • 1





    This produced nothing different than just loading the pdf in an iframe...

    – Serj Sagan
    Aug 7 '13 at 3:18






  • 5





    That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

    – James P.
    Aug 14 '13 at 1:49











  • What if you don't want the src path of your pdf file exposed in the objects data tag?

    – Base Desire
    Sep 24 '13 at 15:02






  • 8





    well wouldn't the src path be shown in an iFrame to? ^

    – sam
    Jul 18 '14 at 9:21






  • 1





    can this load image file as well..?

    – Ronak Rathod
    Nov 17 '16 at 7:32



















19














This is the code to link an HTTP(S) accessible PDF from an <iframe>:



<iframe src="https://research.google.com/pubs/archive/44678.pdf"
width="800px" height="600px" >


Fiddle: http://jsfiddle.net/cEuZ3/1545/



EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at runtime...



EDIT 2: Appearently, it is a bug (but there are workarounds):



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?






share|improve this answer


























  • 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 ..

    – user1753210
    Oct 19 '12 at 12:29











  • 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

    – user1753210
    Oct 19 '12 at 12:33











  • Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

    – Gathole
    Jun 22 '17 at 5:02











  • Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

    – Andrea Ligios
    Jun 22 '17 at 7:39





















5














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:



in php it will look like this...



...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...

readfile('localfilepath.pdf')





share|improve this answer

































    -3














    Do it like this:



    <iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe>


    Remember to close iframe tag.






    share|improve this answer






















      protected by Community Oct 17 '16 at 12:11



      Thank you for your interest in this question.
      Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



      Would you like to answer one of these unanswered questions instead?














      4 Answers
      4






      active

      oldest

      votes








      4 Answers
      4






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      37














      Using an iframe 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).



      Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.



      In your HTML, you could set up a div to display the PDFs:



      <div id="pdfRenderer"></div>


      Then, you can have Javascript code to embed a PDF in that div:



      var pdf = new PDFObject({
      url: "https://something.com/HTC_One_XL_User_Guide.pdf",
      id: "pdfRendered",
      pdfOpenParams: {
      view: "FitH"
      }
      }).embed("pdfRenderer");





      share|improve this answer





















      • 1





        This produced nothing different than just loading the pdf in an iframe...

        – Serj Sagan
        Aug 7 '13 at 3:18






      • 5





        That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

        – James P.
        Aug 14 '13 at 1:49











      • What if you don't want the src path of your pdf file exposed in the objects data tag?

        – Base Desire
        Sep 24 '13 at 15:02






      • 8





        well wouldn't the src path be shown in an iFrame to? ^

        – sam
        Jul 18 '14 at 9:21






      • 1





        can this load image file as well..?

        – Ronak Rathod
        Nov 17 '16 at 7:32
















      37














      Using an iframe 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).



      Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.



      In your HTML, you could set up a div to display the PDFs:



      <div id="pdfRenderer"></div>


      Then, you can have Javascript code to embed a PDF in that div:



      var pdf = new PDFObject({
      url: "https://something.com/HTC_One_XL_User_Guide.pdf",
      id: "pdfRendered",
      pdfOpenParams: {
      view: "FitH"
      }
      }).embed("pdfRenderer");





      share|improve this answer





















      • 1





        This produced nothing different than just loading the pdf in an iframe...

        – Serj Sagan
        Aug 7 '13 at 3:18






      • 5





        That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

        – James P.
        Aug 14 '13 at 1:49











      • What if you don't want the src path of your pdf file exposed in the objects data tag?

        – Base Desire
        Sep 24 '13 at 15:02






      • 8





        well wouldn't the src path be shown in an iFrame to? ^

        – sam
        Jul 18 '14 at 9:21






      • 1





        can this load image file as well..?

        – Ronak Rathod
        Nov 17 '16 at 7:32














      37












      37








      37







      Using an iframe 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).



      Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.



      In your HTML, you could set up a div to display the PDFs:



      <div id="pdfRenderer"></div>


      Then, you can have Javascript code to embed a PDF in that div:



      var pdf = new PDFObject({
      url: "https://something.com/HTC_One_XL_User_Guide.pdf",
      id: "pdfRendered",
      pdfOpenParams: {
      view: "FitH"
      }
      }).embed("pdfRenderer");





      share|improve this answer















      Using an iframe 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).



      Instead, I recommend checking out PDFObject which is a Javascript library to embed PDFs in HTML files. It handles browser compatibility pretty well and will most likely work on IE8.



      In your HTML, you could set up a div to display the PDFs:



      <div id="pdfRenderer"></div>


      Then, you can have Javascript code to embed a PDF in that div:



      var pdf = new PDFObject({
      url: "https://something.com/HTC_One_XL_User_Guide.pdf",
      id: "pdfRendered",
      pdfOpenParams: {
      view: "FitH"
      }
      }).embed("pdfRenderer");






      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited Apr 3 '13 at 14:33

























      answered Oct 19 '12 at 12:28









      Aamir MansoorAamir Mansoor

      4,34822342




      4,34822342








      • 1





        This produced nothing different than just loading the pdf in an iframe...

        – Serj Sagan
        Aug 7 '13 at 3:18






      • 5





        That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

        – James P.
        Aug 14 '13 at 1:49











      • What if you don't want the src path of your pdf file exposed in the objects data tag?

        – Base Desire
        Sep 24 '13 at 15:02






      • 8





        well wouldn't the src path be shown in an iFrame to? ^

        – sam
        Jul 18 '14 at 9:21






      • 1





        can this load image file as well..?

        – Ronak Rathod
        Nov 17 '16 at 7:32














      • 1





        This produced nothing different than just loading the pdf in an iframe...

        – Serj Sagan
        Aug 7 '13 at 3:18






      • 5





        That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

        – James P.
        Aug 14 '13 at 1:49











      • What if you don't want the src path of your pdf file exposed in the objects data tag?

        – Base Desire
        Sep 24 '13 at 15:02






      • 8





        well wouldn't the src path be shown in an iFrame to? ^

        – sam
        Jul 18 '14 at 9:21






      • 1





        can this load image file as well..?

        – Ronak Rathod
        Nov 17 '16 at 7:32








      1




      1





      This produced nothing different than just loading the pdf in an iframe...

      – Serj Sagan
      Aug 7 '13 at 3:18





      This produced nothing different than just loading the pdf in an iframe...

      – Serj Sagan
      Aug 7 '13 at 3:18




      5




      5





      That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

      – James P.
      Aug 14 '13 at 1:49





      That's the point. But it's loading the PDF into an object instead of an iframe. See pdfobject.com/markup/index.php

      – James P.
      Aug 14 '13 at 1:49













      What if you don't want the src path of your pdf file exposed in the objects data tag?

      – Base Desire
      Sep 24 '13 at 15:02





      What if you don't want the src path of your pdf file exposed in the objects data tag?

      – Base Desire
      Sep 24 '13 at 15:02




      8




      8





      well wouldn't the src path be shown in an iFrame to? ^

      – sam
      Jul 18 '14 at 9:21





      well wouldn't the src path be shown in an iFrame to? ^

      – sam
      Jul 18 '14 at 9:21




      1




      1





      can this load image file as well..?

      – Ronak Rathod
      Nov 17 '16 at 7:32





      can this load image file as well..?

      – Ronak Rathod
      Nov 17 '16 at 7:32













      19














      This is the code to link an HTTP(S) accessible PDF from an <iframe>:



      <iframe src="https://research.google.com/pubs/archive/44678.pdf"
      width="800px" height="600px" >


      Fiddle: http://jsfiddle.net/cEuZ3/1545/



      EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at runtime...



      EDIT 2: Appearently, it is a bug (but there are workarounds):



      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?






      share|improve this answer


























      • 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 ..

        – user1753210
        Oct 19 '12 at 12:29











      • 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

        – user1753210
        Oct 19 '12 at 12:33











      • Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

        – Gathole
        Jun 22 '17 at 5:02











      • Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

        – Andrea Ligios
        Jun 22 '17 at 7:39


















      19














      This is the code to link an HTTP(S) accessible PDF from an <iframe>:



      <iframe src="https://research.google.com/pubs/archive/44678.pdf"
      width="800px" height="600px" >


      Fiddle: http://jsfiddle.net/cEuZ3/1545/



      EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at runtime...



      EDIT 2: Appearently, it is a bug (but there are workarounds):



      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?






      share|improve this answer


























      • 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 ..

        – user1753210
        Oct 19 '12 at 12:29











      • 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

        – user1753210
        Oct 19 '12 at 12:33











      • Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

        – Gathole
        Jun 22 '17 at 5:02











      • Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

        – Andrea Ligios
        Jun 22 '17 at 7:39
















      19












      19








      19







      This is the code to link an HTTP(S) accessible PDF from an <iframe>:



      <iframe src="https://research.google.com/pubs/archive/44678.pdf"
      width="800px" height="600px" >


      Fiddle: http://jsfiddle.net/cEuZ3/1545/



      EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at runtime...



      EDIT 2: Appearently, it is a bug (but there are workarounds):



      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?






      share|improve this answer















      This is the code to link an HTTP(S) accessible PDF from an <iframe>:



      <iframe src="https://research.google.com/pubs/archive/44678.pdf"
      width="800px" height="600px" >


      Fiddle: http://jsfiddle.net/cEuZ3/1545/



      EDIT: and you can use Javascript, from the <a> tag (onclick event) to set iFrame' SRC attribute at runtime...



      EDIT 2: Appearently, it is a bug (but there are workarounds):



      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?







      share|improve this answer














      share|improve this answer



      share|improve this answer








      edited May 23 '17 at 12:18









      Community

      11




      11










      answered Oct 19 '12 at 12:25









      Andrea LigiosAndrea Ligios

      39.8k1575170




      39.8k1575170













      • 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 ..

        – user1753210
        Oct 19 '12 at 12:29











      • 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

        – user1753210
        Oct 19 '12 at 12:33











      • Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

        – Gathole
        Jun 22 '17 at 5:02











      • Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

        – Andrea Ligios
        Jun 22 '17 at 7:39





















      • 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 ..

        – user1753210
        Oct 19 '12 at 12:29











      • 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

        – user1753210
        Oct 19 '12 at 12:33











      • Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

        – Gathole
        Jun 22 '17 at 5:02











      • Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

        – Andrea Ligios
        Jun 22 '17 at 7:39



















      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 ..

      – user1753210
      Oct 19 '12 at 12:29





      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 ..

      – user1753210
      Oct 19 '12 at 12:29













      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

      – user1753210
      Oct 19 '12 at 12:33





      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

      – user1753210
      Oct 19 '12 at 12:33













      Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

      – Gathole
      Jun 22 '17 at 5:02





      Works fine in desktop browsers but not in mobile browsers... can you please help me to make it working?

      – Gathole
      Jun 22 '17 at 5:02













      Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

      – Andrea Ligios
      Jun 22 '17 at 7:39







      Define "does not work fine". Is it too big ? Just use vh and vw instead of pixels, read more: stackoverflow.com/a/30512369/1654265

      – Andrea Ligios
      Jun 22 '17 at 7:39













      5














      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:



      in php it will look like this...



      ...headers...
      header("Content-Disposition: inline; filename=doc.pdf");
      ...headers...

      readfile('localfilepath.pdf')





      share|improve this answer






























        5














        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:



        in php it will look like this...



        ...headers...
        header("Content-Disposition: inline; filename=doc.pdf");
        ...headers...

        readfile('localfilepath.pdf')





        share|improve this answer




























          5












          5








          5







          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:



          in php it will look like this...



          ...headers...
          header("Content-Disposition: inline; filename=doc.pdf");
          ...headers...

          readfile('localfilepath.pdf')





          share|improve this answer















          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:



          in php it will look like this...



          ...headers...
          header("Content-Disposition: inline; filename=doc.pdf");
          ...headers...

          readfile('localfilepath.pdf')






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Jan 21 '14 at 12:29

























          answered Nov 25 '13 at 8:36









          RoeyRoey

          9701314




          9701314























              -3














              Do it like this:



              <iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe>


              Remember to close iframe tag.






              share|improve this answer




























                -3














                Do it like this:



                <iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe>


                Remember to close iframe tag.






                share|improve this answer


























                  -3












                  -3








                  -3







                  Do it like this:



                  <iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe>


                  Remember to close iframe tag.






                  share|improve this answer













                  Do it like this:



                  <iframe src="http://samplepdf.com/sample.pdf" width="800px" height="600px"></iframe>


                  Remember to close iframe tag.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Feb 2 '16 at 18:28









                  Atif TariqAtif Tariq

                  1,8381424




                  1,8381424

















                      protected by Community Oct 17 '16 at 12:11



                      Thank you for your interest in this question.
                      Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



                      Would you like to answer one of these unanswered questions instead?



                      Popular posts from this blog

                      Xamarin.iOS Cant Deploy on Iphone

                      Glorious Revolution

                      Dulmage-Mendelsohn matrix decomposition in Python