How to Embed PDF in HTML

1. Use the embed Tag to Embed PDF in HTML
2. Use the iframe Tag to Embed PDF in HTML
3. Use the object Tag to Embed PDF in HTML

In this tutorial, we will introduce methods to embed PDF in HTML.

Use the embed Tag to Embed PDF in HTML

HTML offers an embed tag to embed external resources in the webpage. We can embed external resources like PDFs, media players, webpages, etc., using the embed tag. The tag has the src attribute where we can give the path of the file to be embedded. We can specify the type of the embedded file with the type attribute. For PDF, the type attribute should be application/pdf. The embed tag is a self-closing tag.

For example, create a file named files in the directory where the HTML file is located. Inside the files file, a PDF husky.pdf is located. In HTML, write the embed tag and specify the path files/husky.pdf in the src attribute. Then set the type attribute to application/pdf. Give the width and height of the PDF of 100%.

The example below will generate the husky.pdf PDF on the webpage. The PDF will cover the viewport as height and width are set to 100%.

The embed tag may not be supported in all modern browsers. The Android Chrome browser does not support embedding PDF. In such cases, we can use the Google Drive PDF Viewer. We should remove the type attribute and set the Google Drive URL of the PDF. In this way, we can embed PDF in HTML.

Example Code:

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

Use the iframe Tag to Embed PDF in HTML

The iframe HTML tag lets us embed other documents in the HTML file. We can use it to embed PDF in HTML. We can specify the path of the PDF file in the src attribute. We can set the height and width of the PDF within the tag.

For example, write the iframe tag and set the src attribute to files/husky.jpg. Husky.jpg is the PDF file to be embedded which lies in the files directory. The HTML file and the files directory lies in the same directory. Set the height and width of the PDF to 100%. The PDF will cover the viewport. Using the iframe tag gives a vertical scrollbar to the PDF. In this way, we can embed a PDF file in HTML using the iframe tag.

Example Code:

<iframe src="files/husky.pdf" height="100%" width="100%"></iframe>

Use the object Tag to Embed PDF in HTML

We can also use the object tag to embed PDF in HTML. The object tag will set a container that an external resource will use. The external resources can be PDF, media, webpages, etc. We can set the path of the file in the data attribute. Similarly, like the methods above, we can set the height and width of the container from the tag itself. Thus, we can embed PDF in HTML using the object tag.

Example Code:

<object data="files/husky.pdf" height="100%" width="100%"></object>