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 tag. The SRC property of the tag is used to identify the name and location of the PDF file to be displayed. Like images, the SRC can be absolute or relative. The size of the rectangle, or "window", in which the PDF file is displayed is based on a number of pixels defined in the WIDTH and HEIGHT properties of the tag. The WIDTH and HEIGHT properties can either be a number of pixels (I used 500 in these examples) or a percentage of the browser's real estate (e.g. 90%, 50% etc.) The pop-up example in example #2 uses 100%.

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

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.

For another view of how PDFs can be used in full-screen mode, try out a pop-up window that uses JavaScript with the tag to display a PDF file that has been set to open in full-screen mode. In the pop-up window's HTML, I've set the LEFTMARGIN and TOPMARGIN properties of the BODY tag to "0" so that the PDF is flush against the pop-up window's edges. As the user stretches the window, the PDF scales with it. See the note within the PDF file for the complete HTML code for the pop-up window.

Example #3

Editor's note: We've had to turn off the third example as it's stopping the page from displaying properly.

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.

Related articles online

PDF In-Depth Free Product Trials Ubiquitous PDF

Debenu Aerialist

The ultimate plug-in for Adobe Acrobat. Advanced splitting, merging, stamping, bookmarking, and link...

Download free demo

Debenu PDF Tools Pro

It's simple to use and will let you preview and edit PDF files, it's a Windows application that makes...

Download free demo

Five visions of a PDF Day

In the world of PDFs or as we like to say Planet (of) PDF, a year isn't a real PDF year without an intense few days of industry knowledge sharing.

May 15, 2018
Platinum Sponsor

Search Planet PDF
more searching options...
Planet PDF Newsletter
Most Popular Articles
Featured Product

Debenu PDF Aerialist

The ultimate plug-in for Adobe Acrobat. Advanced splitting, merging, stamping, bookmarking, and link control. Take Acrobat to the next level.


Adding a PDF Stamp Comment

OK, so you want to stamp your document. Maybe you need to give reviewers some advice about the document's status or sensitivity. This tip from author Ted Padova demonstrates how to add stamps with the Stamp Tool along with related comments.