How to Embed PDF File in HTML?

How to Embed PDF File in HTML?

Mostly we used the <a> tag to link the PDF file in the HTML, but today we will see how we can embed the PDF file in an HTML page.

We will embed a PDF file in HTML as a PDF viewer so you can read the file there and don’t need to download it.

So today we will learn how we can embed the PDF document in an HTML page or you can say PDF embed in the website.

Embed PDF file in HTML

There are many ways to embed the PDF files in an HTML web page and make it a webpage’s part. We can use the <embed>, <iframe>, and <a> tags to embed the PDF in HTML.

Embed PDF File with <embed> Tag

In this example, we will see how we can use the <embed> HTML tag to embed the PDF file in an HTML webpage.

The <embed> tag is used to load the external content on a webpage and it has 4 attributes src, type, width, and height.

Let’s create a sample HTML web page and used the <embed> tag to display the PDF on the page.

Output

Embed PDF File with <iframe> Tag

In this example, we will use the <iframe> HTML tag to embed the PDF file to make a PDF on page viewer in an HTML web page.

The <iframe> HTML tag used to embed another document in the current HTML page. It has several attributes that you can use as per need. You can style the iframe using CSS.

Let’s see the example of the <iframe> tag to embed the PDF in an HTML web page.

Output

Embed PDF File with <a> Tag

Using the <a> HTML tag, you can only make the hyperlink on a PDF file on an HTML web page, not the display as a PDF viewer. When someone clicks on that link it will open the full page PDF file in the browser.

Output
Sample PDF File

Conclusion

So, you learned in this tutorial is that how to embed PDF files in an HTML web page in different ways. You see how to use <embed>, <iframe>, and <a> HTML tags used to embed the PDF documents in web page.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published.