How to embed a PDF viewer in a page

Question

If I m not mistaken  Google Docs offers the means to display a PDF that is stored on the same server as the web page via an  lt iframe gt   but I need to know how I can do this in a cross-browser compliant way

User · Answer

Be sure to test any solution across different Reader preferences. A site visitor may have their browser set to open the PDF in Reader/Acrobat as opposed to the browser, e.g., by disabling the Acrobat plugin in Firefox..

I can't be sure of my results, because I have two different Acrobat plugins that Firefox recognizes due to my having different versions of Adobe Acrobat and Adobe Reader, but it does appear that you at least need to test what happens if a website visitor has their browser set to not open the PDF in the browser. It could be quite annoying when they look at what appears to be an otherwise usable web page and their browser is nagging them to open a PDF file that they think they didn't request. In some cases, the PDF file spontaneously opened in Adobe Reader, not the browser, and in other cases the browser threw up a dialog saying the file didn't exist.

I ran into such mismatches with iframe and object both, different issues for different code.

This is for simple HTML code. I haven't tried the suggested frameworks.

User · Answer

have a try with Flex Paper  http   flexpaper devaldi com    it works like scribd

User · Answer

If I m not mistaken  the OP was asking  although later accepted a  js solution  whether Google s embedded PDF display server will display a PDF on his own website   So  one and a half years later  yes  it will   See http   googlesystem blogspot ca 2009 09 embeddable-google-document-viewer html   Also  see https   docs google com viewer  and plug in the URL of the file you want to display   Edit  Re-reading  OP was asking for solutions that don t use iFrames  I don t think that s possible with Google s viewer

User · Answer

This might work a little better this way   lt embed src   MyHome pdf  width   500  height   375  gt

User · Answer

I would really opt for FlowPaper  especially their new Elements mode that can be found here   https   flowpaper com demo   It flattens the PDFs significantly at the same time as keeping text sharp which means that it will load much faster on mobile devices

User · Answer

using bootstrap you can have a responsive and mobile first embeded file    lt div class  embed-responsive embed-responsive-16by9  gt     lt iframe class  embed-responsive-item  src  address of your file  allowfullscreen gt  lt  iframe gt   lt  div gt   Aspect ratios can be customized with modifier classes   lt  -- 21 9 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-21by9  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt    lt  -- 16 9 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-16by9  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt    lt  -- 4 3 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-4by3  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt    lt  -- 1 1 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-1by1  gt     lt iframe class  embed-responsive-item  src       gt  lt  iframe gt   lt  div gt

User · Answer

PDF js is an HTML5 technology experiment that explores building a faithful and efficient Portable Document Format  PDF  renderer without native code assistance  It is community-driven and supported by Mozilla Labs   You can see the demo here

User · Answer

You could consider using PDFObject by Philip Hutchison   Alternatively  if you re looking for a non-Javascript solution  you could use markup like this    lt object data  myfile pdf  type  application pdf  width  100   height  100   gt     lt p gt Alternative text - include a link  lt a href  myfile pdf  gt to the PDF  lt  a gt  lt  p gt   lt  object gt

User · Answer

pdf2htmlEX by coolwanglu is probably the best solution out there to convert a pdf file into html  You could do a simple convert and then embed the html page as an iframe or something similar

[html] How to embed a PDF viewer in a page?

Examples related to html

Examples related to pdf