How can I embed a PDF viewer on a web page?

Question

If I'm not mistaken, Google Docs offers tools for displaying a PDF file, which is stored on the same server as the web page, through iFrame, but I need to know how I can do this in the cross-browser path.

Answer 1

You can use the PDFObject of Philip Hutchison.

Alternatively, if you are looking for a solution other than Javascript, you can use markup as follows:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%"> <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p> </object> 

Answer 2

PDF.js is an experimental HTML5 method that explores the construction of a reliable and efficient portable document format (PDF) rendering without native code support. It is community supported and supported by Mozilla Labs.

You can see the demo here .

Answer 3

This may work a little better.

 <embed src= "MyHome.pdf" width= "500" height= "375"> 

Answer 4

If I’m not mistaken, the OP asked (although it later made a decision .js) whether the Google’s built-in PDF display server would display the PDF on its own website.

So, in a year and a half: yes, it will.

See http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html . Also see https://docs.google.com/viewer and include the URL of the file you want to display.

Edit: While re-reading, the OP requested solutions that do not use iFrames. I do not think this is possible using the Google viewer.

Answer 5

try Flex Paper http://flexpaper.devaldi.com/

it works like scribd

Answer 6

Be sure to test any solution in different Reader settings. A site visitor may have their browser installed to open a PDF file in Reader / Acrobat, unlike a browser, for example, 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 because I have different versions of Adobe Acrobat and Adobe Reader, but it looks like you should at least check what happens if a website visitor has his own browser so that he does not open the PDF in the browser. This can be quite frustrating when they look at what appears to be another used webpage, and their browser prompts them to open a PDF file that they thought was not requested. In some cases, the PDF file opened spontaneously in Adobe Reader, and not in the browser, and in other cases, the browser started a dialog saying that the file does not exist.

I came across such inconsistencies with the iframe and the object, and different problems for different codes.

This is for simple HTML. I have not tried the proposed framework.

Answer 7

pdf2htmlEX from coolwanglu is probably the best solution for converting a PDF file to html. You can make it simple to convert and then paste the html page as an iframe or something like that.

Answer 8

I would choose FlowPaper, especially the new Elements mode, which can be found here: https://flowpaper.com/demo/

It significantly smoothes PDF files while saving text, which means that it will load much faster on mobile devices.