How to Display a PDF Document in a Web Page

Using HTML Objects and PDF Files - Mark Alexander Bain
Using HTML Objects and PDF Files - Mark Alexander Bain
Portable Document Format files provide important stand alone content for web sites. However, they can also be incorporated into web pages

PDF ( or the Portable Document Format) is used extensively throughout the Internet. However, most web site developers will actually only use one format – the Adobe PDF. In fact, Adobe PDF is used so extensively that many applications (such as OpenOffice.org Writer) enable users to output files directly into Adobe PDF.. And so, it is very easy to create:

  • a news letter
  • a report
  • a sample chapter of a book

These can then be placed on a web site in the sure knowledge that the reader will see the document exactly as the writer intended. Of course, this causes problem for the web page designer. How can they incorporate a PDF document into their web pages?

Linking to a PDF Document

The web page developer can link to a PDF document in exactly the same way as they would to any other web based document:

< a href="newsletter_20100506.pdf" >6th May News Letter< /a >

This will open the PDF file, but there are a few issues with this method:

  • the reader will have to use the browser's back button to return to the previous page
  • if the reader bookmarks the PDF file and returns to it later, then there is no direct link to the rest of the web site

Obviously the answer is to open the PDF document in context within a web page.

Opening a PDF File Within a Web Page

Rather than opening a PDF file as a separate document, it may be loaded into a web page as an embedded object. Fortunately the HTML object tag makes this very simple

< object > < /object >

The object tag works with just a few essential parameters:

  • data – the url of the PDF document
  • type – the MIME (Multipurpose Internet Mail Extensions) type of the document. For a PDF file the MIME type is "application/pdf"
  • width and height – it's worth noting that if the width and height of the object are set to be less than the width and height of the original PDF document then scroll bars will be automatically displayed on the object.

The HTML code required to display a PDF document within a web page will, therefore, be something like:

< object
data = "newsletter_20100506.pdf"
type = "application/pdf"
width = 600 height = 400 >< /object >
Current News Letter

And with that the web site designer can integrate PDF documents seamlessly into their web pages. Instead of detracting from their overall design the file will add vital content for the web site user.

Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...

rss
Advertisement
Advertisement
Advertisement