How to embed a PDF file in a web site?

Question

I simply want to embed a PDF file in a web site.

The best solution I've found is Google Docs Viewer (http://docs.google.com/viewer), but it does not work for IE and obviously that is not going to work for me.

Anyone have a clean, easy solution to this?

Update: I should add that one of the benefits of embedding the PDF file the Google viewer way is that as the PDF file I link to gets updated (and it could without notice to me), my site would automatically be holding the same PDF file (provided the full pathname doesn't change, which it does not). For this reason converting the file to an image is not preferred while.

Answer 1

Well since you obviously don't want to force someone to download the bloated insecure pdf plugin, why not let them use the bloated insecure flash player?

http://flexpaper.devaldi.com/

But really it is just a simple as

<iframe src="path/to/pdf" width="500" height="700">

Answer 2

Updated answer for HTML5:

<object data="filename.pdf" type="application/pdf">
  Your browser does not support pdfs, <a href="filename.pdf">click here to
  download the file.</a>
</object>

You can read about it here:

http://www.w3schools.com/tags/tag_object.asp

Answer 3

If you do stick with the pdf embedded option, Byron is right although embedded pdf files don't look so great on a webpage. Anyway, be sure to be strict about the coding. Hence:

<iframe src="path/to/pdf" width=500 height = 700>

Should be

<iframe src="path/to/pdf" width="500" height="700">

Small alteration.

Answer 4

How long is the pdf file? Can't you convert it to a very long image and display that in a div with a scrollbar?

Answer 5

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: http://mozilla.github.com/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js enter link description here

You 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="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

Answer 6

I just ftp mine, I do not use Google or any other s/w

you must have some need other than a PDF file sitting in a directory, what is it?

Also, why would you convert the image (and reduce PDF resolution and clarity) ?

Response to Comments

That is the ugliest thing I have seen since my last trip to Africa. You are not seriously thinking of posting that much information on a single page, are you. No one can read it, and I tried every magnification.

For that amount of info, you need to take an architectural approach.

1. Put a few controls on the front page, and feed the user a small amount of manageable info, about the area that they chose. Only.

   Get the info from the source website/database and feed it into your website/database. Only needs to change when the source data changes. The whole linkage can be automated.

   Then you just create nice clean pages, with a reasonable quantity of info, in a readable form, on each page.

2. This is a 20th Century Timetable. Note, not a 21st century timetable (look at Berlin or München for one of those). You really can't just scan an intense doc and provide it as an embedded PDF.

   • Note that you do not need the elaborate controls of CityRail. you can have just a few to allow select of the line and timetable.
   • then produce a page that is a simple form of the CityRail page.
   • or (the absolute minimum) one fully viewable, full size PDF per web page.
     .

3. Like this simple viewable PDF. That example could be served up in one PDF for page 1 and 4 separate PDF pages for the rest; PDFs already have basic navigation, so I have used that feature and produced one 5-pager instead. Make sure you find and use the blue glass buttons and follow the navigation hints on the left top and bottom of each page.

4. Second to demonstrating the PDFs and navigation, look at the folder: the files are all PDFs.

5. Back to the original question. Now you can embed PDFs, but if you do, please do not mess with them. All the controls you have on the linked page are redundant; any browser facilitiates that even now, and will be doing so better in future. Eg. in simple viewable PDF, use your browser controls to increase/decrease magnification, move around the doc, etc.

6. Let's assume you finish your Google Maps page, that's the first or index page. Draw all the train lines in; when the user clicks on a train line, it takes them to either (a) a clean page produced from your db as per (1) which will look like (2), or (b) a single clean PDF in readable form as per (3). You could do the whole project just by manipulating files in directories.

A lot less work. No Google docs; no intermediate s/w to constrict you or work around. You can forget about IE and its multiple incarnations and strangulations; any other browser and its limitations. Concentrate on the data, and getting it out there in presentable form, not on the pitiful s/w and its fits and starts.

Cheers

Answer 7

From HTML5 :

<embed src="url" type="media-type" height="" width=""/>

For media-type refer, http://www.iana.org/assignments/media-types/media-types.xhtml

Answer 8

Google Docs offers an undocumented feature that lets you embed PDF files and PowerPoint presentations in a web page. The files don't have to be uploaded to Google Docs, but they need to be available online.

Here's the code I used to embed the PDF file:

but you should replace the bold URL with your own address. As I mentioned, the document viewer works for PDF and PPT files.

http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html