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.
See Also: How to Convert Html to PDF using JavaScript?
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.
