Embed PDFs in HTML with embed, iframe, and object tags

Instructor

Kevin Cunningham

There are various ways to embed PDFs into your HTML document. Let's explore three of them:

1. Using the embed Tag

The embed tag is a part of the HTML5 specification, making it compatible with most modern browsers. You can embed a PDF using the embed tag as follows:

<embed src="home.pdf" type="application/pdf" width="100%" height="100%">

However, there's a catch. If the browser does not support PDF embedding (common with some mobile devices), your users might see nothing.

2. Using the iframe Tag

A safer option to ensure that your users can access the PDF is by using an iframe. If a browser fails to render the PDF, it usually triggers a download:

<iframe src="home.pdf" width="100%" height="100%">
  <a href="home.pdf">Download the PDF</a>
</iframe>

The message "Download the PDF" will only be displayed if the browser does not support the iframe tag. Still, it's not the best experience if the PDF isn't available.

3. Using the object Tag

The object tag offers even more flexibility. If the PDF isn't found, you can provide a fallback, such as an image or a message:

<object data="home.pdf" type="application/pdf" width="100%" height="100%">
  <img src="broken.png" alt="PDF not found">
  <p>Download the PDF <a href="home.pdf">here</a></p>
</object>

This way, you can provide a more appropriate error message or an alternative for your users when the PDF isn't available.

In conclusion, while there are multiple ways to embed a PDF in your HTML document, it's essential to consider the user experience, especially in scenarios where the PDF might not be accessible. Using fallback options ensures your users can still access the content one way or another.

Share with a coworker

Transcript

[00:00] The first way to embed PDFs inside of a document without using JavaScript is using the embed tag. The embed tag takes a source, which in our case is going to be home.pdf, and a type, in our case going to be application.pdf. We can also pass in a width to allow you to take up the

[00:19] full space of the container and a height. Now embed is part of the HTML5 spec, so it's compatible with all modern browsers, but in static markup, the element doesn't provide a mechanism for fallback content. If the browser doesn't support PDF embedding, which still happens frequently

[00:36] with browsers and mobile devices, the end user will see nothing. So there's two ways around that. The first is by using an iframe. With an iframe, we're pointing at the source, which in this case is home.pdf. We don't need to pass in a type, but we will use the width, 100%, and a height.

[00:55] If the browser cannot render a PDF file, it will normally trigger a download. In the very rare occasions a browser doesn't support the iframe tag, we can give a fallback message. We could say

[01:08] download the PDF and then do a href tag. Then if the PDF is not found, we will get our normal iframe. It cannot find something. This message will only be rendered if the iframe tag itself is not

[01:24] supported. But that's not a great experience if the PDF isn't there, which brings us to our third approach, the object tag. The object element takes a data attribute of our home.pdf, takes a type of our application.pdf, and then we'll take our width and our height.

[01:42] So in this case, our fallback can be a fully blown HTML container. So in this case, I might put an image of source broken.png and maybe the same message we had above. Download the PDF here.

[02:00] Now if the PDF can't be found, we have our fallback message that we asked for, which you might decide is more appropriate error handling in this context.