- This topic is empty.
-
AuthorPosts
-
November 14, 2008 at 11:55 am #9303daniel-silveiraParticipant
What is the recommended way to embed PDF in HTML?
- iFrame?
- Object?
- Embed?
What does Adobe say itself about it?
In my case, the PDF is generated on the fly, so it can’t be uploaded to a third-party solution prior to flushing it.
November 15, 2008 at 11:11 am #9322adam-davisParticipantFDView combines PDF2SWF (which itself is based on xpdf) with an SWF viewer so you can convert and embed PDF documents on the fly on your server.
xpdf is not a perfect PDF converter. If you need better results then Ghostview has some ability to convert PDF documents into other formats which you may be able to more easily build a Flash viewer for.
But for simple PDF documents, FDView should work reasonably well.
November 15, 2008 at 11:53 am #9313galacticcowboyParticipantTo stream the file to the browser, see Stack Overflow question How to stream a PDF file as binary to the browser using .NET 2.0 – note that, with minor variations, this should work whether you’re serving up a file from the file system or dynamically generated.
With that said, the referenced MSDN article takes a rather simplistic view of the world, so you may want to read Successfully Stream a PDF to browser through HTTPS as well for some of the headers you may need to supply.
Using that approach, an iframe is probably the best way to go. Have one webform that streams the file, and then put the iframe on another page with its
src
attribute set to the first form.November 15, 2008 at 12:01 pm #9331lubos-haskoParticipantProbably 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.htmlFebruary 4, 2010 at 12:05 pm #9327amitParticipantHave a look for this code- To embed the PDF in HTML
<!-- Embed PDF File --> <object src="YourFile.pdf" type="application/pdf" title="SamplePdf" width="500" height="720"> <a href="YourFile.pdf">shree</a> </object>
March 10, 2010 at 1:38 am #9330lukasz-korzybskiParticipantYou can also use Google PDF viewer for this purpose. As far as I know it’s not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:
<iframe src="https://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>
What is important is that it doesn’t need a Flash player, it uses JavaScript.
November 15, 2010 at 11:50 am #9321bjornParticipantScribd no longer require you to host your documents on their server. If you create an account with them so you get a publisher ID. It only takes a few lines of JavaScript code to load up PDF files stored on your own server.
For more details, see Developer Tools.
March 2, 2011 at 6:36 am #9329gayleParticipantYou do have some control over how the PDF appears in the browser by passing some options in the query string. I was happy to this working, until I realized it does not work in IE8. 🙁
It works in Chrome 9 and Firefox 3.6, but in IE8 it shows the message “Insert your error message here, if the PDF cannot be displayed.”
I haven’t yet tested older versions of any of the above browsers, though. But here’s the code I have anyway in case it helps anyone. This sets the zoom to 85%, removes scrollbars, toolbars and nav panes. I’ll update my post if I do come across something that works in IE as well.
<object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0"> <p>Insert your error message here, if the PDF cannot be displayed.</p> </object>
August 12, 2011 at 5:29 am #9332batfanParticipantThis is quick, easy, to the point and doesn’t require any third-party script:
<embed src="http://example.com/the.pdf" width="500" height="375" type="application/pdf">
UPDATE (2/3/2021)
Adobe now offers its own PDF Embed API.
(That requires registering at Adobe and get clientID to use within js)https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html
UPDATE (1/2018):
The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer
<embed src="https://drive.google.com/viewerng/ viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">
December 6, 2011 at 6:17 am #9326dan-mantylaParticipantConvert it to PNG via ImageMagick, and display the PNG (quick and dirty).
<?php $dir = '/absolute/path/to/my/directory/'; $name = 'myPDF.pdf'; exec("/bin/convert $dir$name $dir$name.png"); print '<img src="$dir$name.png" />'; ?>
This is a good option if you need a quick solution, want to avoid cross-browser PDF viewing problems, and if the PDF is only a page or two. Of course, you need ImageMagick installed (which in turn needs Ghostscript) on your web server, an option that might not be available in shared hosting environments. There is also a PHP plugin (called imagick) that works like this but it has its own special requirements.
May 15, 2014 at 2:36 am #9328suneel-kumarParticipantUsing both
<object>
and<embed>
will give you a wider breadth of browser compatibility.<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px"> <embed src="http://yoursite.com/the.pdf" type="application/pdf"> <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p> </embed> </object>
May 19, 2015 at 11:32 am #9314george-pligoropoulosParticipantOne of the options you should consider is Notable PDF
It has a free plan unless you are planning on doing real-time online collaboration on pdfsEmbed the following
iframe
to any html and enjoy the results:<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
February 3, 2016 at 2:36 am #9315daryl-hParticipant<object width="400" height="400" data="helloworld.pdf"></object>
August 19, 2016 at 12:30 pm #9323said-bouigherdaineParticipant-
Create a container to hold your PDF
<div id="example1"></div>
-
Tell PDFObject which PDF to embed, and where to embed it
<script src="/js/pdfobject.js"></script> <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
-
You can optionally use CSS to specify visual styling, including dimensions, border, margins, etc.
<style> .pdfobject-container { height: 500px;} .pdfobject { border: 1px solid #666; } </style>
source : https://pdfobject.com/
February 23, 2017 at 8:09 am #9317plaParticipantPdfToImageServlet using ImageMagick’s
convert
command.Usage example:
<img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>
-
AuthorPosts
- You must be logged in to reply to this topic.