Easiest Ways to Embed a PDF File in HTML

There’s a difference between embedding and linking to a PDF. Linking simply opens or downloads the file, while embedding makes the PDF appear right inside the webpage. Linking to a PDF on your website is the simplest approach, but sometimes this method just doesn’t cut it.

Maybe you want visitors to read a document without leaving the page they're on, or you need a full-size PDF to display nicely on a page. Embedding a PDF directly into an HTML page keeps everything relatively neat and accessible. Both have their uses, so let’s go over the options.

Quickest Way Is to Just Link to the PDF

The absolute easiest method is using a simple tag in the webpage source code. Just pop in the file URL like this:

Want it to open in a new tab? Add target="_blank". And if you prefer having the PDF download to the user’s device as soon as they click on the link, use the download attribute.

This method is quick and lightweight, but it takes users away from the page they’re on. If you want them to stay put, embedding is the way to go.

Embedding a PDF Directly on Your Webpage

There are several ways in which to embed a PDF directly in a webpage.

Using the iframe Tag

The <iframe> tag creates an inline frame that the PDF is displayed in. It offers the widest support amongst browsers and allows for some degree of customization and control with attributes:

You start by listing the source, /yourpdfdocument.pdf in the above example. Adding #toolbar=0 to the end of the file name is optional; all it does is disables the PDF toolbar. Adding width and height attributes ensures the PDF displays more or less the same across different devices. To keep it fairly responsive, width is best set as a percentage; height can be set as a percentage or as pixels. The style attribute is optional.

Using the Object Tag

Originally meant for embedding browser plug-ins, the <object> tag is also widely supported by all browsers. The main benefit to using it instead of <iframe> is it can display a message if a user’s browser doesn’t support embedded PDFs:

Most users would see the embedded PDF displayed as you want. But if—for some reason—a user has a browser that can't display embedded documents, they will see a message, along with a link to download the file.

Using the Embed Tag

Using the embed tag isn't too different to the other methods:

But it appears lower on the list because some browsers have no love for this tag. And, instead of displaying a message, all users would see is a blank space if the browser can't handle PDFs.

Making PDF Embeds More Responsive

PDFs can be stubborn when it comes to resizing, but—sometimes—a little CSS magic can help:

Try wrapping the embedded PDF in a container and use max-width:

The addition of “height: auto;” should allow it to scale naturally. Should, because PDFs don't always respond the way we want them to. In some instances, these workarounds might result in the inline frame being responsive and adjusting to different screen sizes, while the PDF stays full size and requires lots of scrolling to read.

If you're very comfortable working with styling and CSS, you could try using media queries to adjust for smaller screens if needed. Unfortunately, you might need to experiment quite a bit to find what works best for your document across the widest range of devices.

What If the PDF Doesn’t Load?

There’s always a chance that—despite your best efforts—the embedded PDF doesn’t load for some users. It could be because of a browser or device quirk, or simply a temporary glitch.

This is why the object tag approach works well. Regardless of the cause, if the PDF doesn’t load, visitors to your site will still be able to download the PDF.

Converting PDFs Before Embedding

Before embedding a PDF in your webpage, you might need to convert it into a different format to make some adjustments or optimize it for better display. The Smallpdf PDF Converter is perfect for converting PDFs to Word, PowerPoint, or Excel, so you can extract text or images from a PDF before embedding. You can also use it to turn Word, Excel, or PowerPoint into PDFs, when your content is in a different format and needs to be embedded as a PDF.

Quick Answers to Common Questions About Embedding PDFs

How to embed a PDF in HTML?

Use the embed, iframe, or object tag with the src attribute pointing to the PDF file. If you're looking for the easiest and most widely supported method, iframe is your best bet. It's simple to set up and works well across different browsers. If you need a fallback for older browsers, object can help, but always provide a download link just in case.

How to embed a PDF file in HTML without a download?

Use an iframe or embed tag instead of linking the file directly, so it opens within the webpage. This ensures users can view the document without downloading it to their device. But it is good form to still include a download option, in case the PDF doesn’t load.

How do you link a PDF file to HTML?

Use the <a> tag with the href attribute pointing to the PDF file: <a href="/yourpdfdocument.pdf">Download PDF</a>. If you want the file to open in a new tab instead of redirecting users away from your page, add target="_blank". This way, visitors stay on your site while checking out the document.

Can you embed a PDF form in a website?

Yes, but interactive form features might not work in all browsers. Some elements, like checkboxes or drop-downs, may not function as expected. Test it out using different browsers and devices and offer an alternative just in case.