Display Adobe PDF Inside a Div

Display Adobe pdf inside a div

Yes you can.

See the code from the following thread from 2007: PDF within a DIV

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

It uses <object>, which can be styled with CSS, and so you can float them, give them borders, etc.

(In the end, I edited my pdf files to remove large borders and converted them to jpg images.)

what is the best way to display PDF in DIV or panel

I used below option to embed:

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

Can I show a PDF inside a DIV with a zoom function?

No. PDFs cannot be displayed in a DIV, as they're not html or an image. You can convert the PDF to html/images on the server and display that, just like google's "quick view" function does. But in general, PDF rendering in-browser is dependent on the presence of a plugin (e.g. Adobe Reader, Chrome's built-in rendering engine notwithstanding). Plugins can't be displayed in divs, just embed/object/iframe sections.

Recommended way to embed PDF in HTML?

Probably the best approach is to use the PDF.JS library. It's a pure HTML5/JavaScript renderer for PDF documents without any third-party plugins.

Online demo:
https://mozilla.github.io/pdf.js/web/viewer.html

GitHub:
https://github.com/mozilla/pdf.js

Display PDF within web browser

I use Google Docs embeddable PDF viewer. The docs don't have to be uploaded to Google Docs, but they do have to be available online.

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

---

Related Topics