Embedding PDFs within HTML files
By Gordon Kent
One of the most underused
methods of displaying PDFs on websites is to embed the PDF file within an HTML
document. Macromedia Flash, QuickTime, MPEG and other rich media file types
are frequently embedded within HTML pages. PDF files can also be embedded, and
here I'll cover how, why and when it may be useful to embed PDF files in your
HTML pages.
Please note that embedding
PDFs within HTML pages has one specific disadvantage for Netscape Navigator
users, the first page of the PDF file is the only one displayed. I'll cover
how to "get around" this issue. If you develop web pages that afford
for the sometimes radical differences between browser capabilities, it should
be a simple issue of sniffing out the user's browser and presenting the correct
code. For others, the fact the both browsers don't support the same capabilities
may be reason enough not to embed PDF files within your HTML pages.
Serving PDFs on the web is most often done by simply linking from a HTML file
to a PDF file (or vice, versa). When a user clicks on a link, Acrobat Reader
(or the full version of Acrobat, if it is installed) is spawned and the PDF
is displayed within the browser's window. This displays the Acrobat toolbar
just below the browser's toolbar. Users have the choice of navigating either
the PDF file (assuming it is more than one page) or navigating the web site
using the web browser's toolbar. With embedded PDF files, the process is technically
the same, however, the Acrobat toolbar appears at the top (unless other preferences
have been set) of the region defined for the embedded PDF.
Embedded PDF files function as other PDF files. Navigation, printing, the filling
in of form fields, JavaScript, etc. all work as they normally would. Additionally,
PDF files that have file open properties, such as a hidden toolbar, a particular
page view or magnification or full-screen mode will function as expected. In
full screen mode, the PDF file is displayed full-screen within the region defined
for it, not full screen within the web browser window (see example #2).
Why embed PDF files?
Embedding PDF files within HTML pages offer you the flexibility to display other
web-based elements within the page such as banner advertisements, search forms,
or dynamically generated information specific to a user or time which could
include stock quotes, news updates, personalized navigation, etc. The majority
of the dynamic information is represented as HTML.
Sites that use dynamic page generation software (such as content management
systems, personalization engines and even some application servers) have struggled
when publishing PDF files as these systems often don't support PDF file natively.
Furthermore, the systems are designed to generate HTML dynamically, and not
PDF files. However, many of these systems can work with embedded images, media
files and so can be used to efficiently display PDF files.
What about frames?
In many cases where HTML (or other web-based media) must be displayed with a
PDF file, web developers typically choose to use frames. Depending on the application,
frames may be a better choice than embedding PDF files, especially if the whole
site uses frames.
Here's an example of a simple PDF file embedded within a HTML page.
Example #1
Note: If you're viewing this
with Netscape Navigator, you will not see the standard Acrobat toolbars nor
will you be able to interact with the PDF file. Instead it appears like an image
does, which for some applications could be useful. This example does include
a link to the PDF file. Click the PDF file image to open the PDF file within
the browser. When opened, you may interact with the PDF file as you usually
would.
To embed PDF files within your HTML pages, use the
Here's the source code of Example #1 above:
For Netscape Navigator users,
add the "href" so the PDF file opens when the PDF image is clicked-on.
Note that it is safe to include
the HREF tag for all browsers if you wish. The HREF link does not function with
Internet Explorer, as IE allows complete interaction with the PDF file.
Example #2 below shows the same PDF file in full screen mode. (Note
that we can display more than one PDF file per HTML page, too).
To set how a PDF should open, within Acrobat (full version) select File >
Document Properties > Open Options... To set the file to open in full screen
mode click "Open in Full Screen Mode" in the Window Options section.
From the Open Options dialog box you can also set which page to open first,
the page's magnification and page layout as well as which toolbars to display,
etc.
In short, there are a wide number of uses for embedding PDF files within HTML
pages. If you encounter an application you feel is unique or have problems with
these examples, feel free to email me at gordon_kent@yahoo.com.
