How to display pdf content in web page using html5 and jquery?

Question

How to display pdf document inside my div . I am using HTML5 and jquery to build my mobile site. I need to display my pdf document inside a Turnjs div need to flip pages and go to specific page

Answer 1

<div>
<object data="test.pdf" type="application/pdf" width="300" height="200">
alt : <a href="test.pdf">test.pdf</a>
</object>
</div> 

Read this thread - http://www.webdeveloper.com/forum/showthread.php?152923-PDF-within-a-DIV

Answer 2

You can use this code:

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

Or use Google Docs embeddable PDF viewer:

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

Answer 3

我敢说它的名字是因为害怕受到严厉惩罚，但你可以使用iframe并允许浏览器提供导航。

Answer 4

What I do is drag the pdf to google drive. Then, click on the new pdf (it will usually be upper left in google drive), click the share icon at the top, go to advanced , then click change and make sure the "Public" radio button is clicked. Click SAVE , then click DONE . Now go back to google drive, click on the pdf to open it, then click the Pop-out icon (upper right, next to the X close icon). Once the pdf is now full screen, click the : more actions icon (three vertical dots) There you will find an "Embed" opportunity. Click that and you get the embed code. Voila!!

Note: The pdf gotten this way will be ready to paste into your blog or HTML website, AND any links in the document will work!! AND, there will be a little Pop-out icon in the upper right, upon hover, that makes the pdf full screen. And, you can pop it into a div if you want to put more than one on the page. Some examples are up at http://internetpdf.com .

John Burch