How to Embed PDF file using HTML ?
Last Updated :
22 Mar, 2024
We will learn how to embed PDF files in HTML documents, along with knowing their implementation through examples. Sometimes, you may want to insert a PDF file into an HTML document or code, to make the content more interactive. Because the formats are so different, it is not easy to accomplish the task.Â
These are the following methods for doing this:
- HTML’s object tag is the first way to embed PDF files. In the below example, the pdf file will be displayed on a web page, which is an object.
- In addition to embedding a PDF file into a webpage, the object tag can embed ActiveX, Flash, video, audio, and Java applets.
- Interactive documents can be attached to an object embedded with an HTML tag.
- It can be displayed according to your need on the screen by using the object’s height and width attributes.
Example 1: This example describes the embedding of a PDF file in HTML using the Object Tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>PDF in HTML</title>
</head>
<style>
.pdf {
width: 100%;
aspect-ratio: 4 / 3;
}
.pdf,
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,
h3 {
text-align: center;
}
h1 {
color: green;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<h3>Embedding the PDF file Using Object Tag</h3>
<object class="pdf"
data=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf"
width="800"
height="500">
</object>
</body>
</html>
Output:
Method 2: Using an iframe
- Using an iframe tag is the second way to embed a pdf file in an HTML web page. In web development, web developers use the iframe tag to embed files in various formats and even other websites within a web page.
- Due to its wide compatibility, the iframe tag is widely used for embedding pdf.
- A browser that does not support PDF documents or the object tag can also use this tag to embed a pdf HTML code.
Example 2: This example describes the embedding of a PDF file in HTML using an iframe.
HTML
<!DOCTYPE html>
<html>
<head>
<title>PDF in HTML</title>
</head>
<style>
.pdf {
width: 100%;
aspect-ratio: 4 / 3;
}
.pdf,
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,
h3 {
text-align: center;
}
h1 {
color: green;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<h3>Embedding the PDF file Using Iframe Tag</h3>
<iframe class="pdf"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf"
width="800" height="500">
</iframe>
</body>
</html>
Output:
- When embedding a pdf HTML code into a website, the embed tag isn’t used as often as the previous tags because if the user’s browser can’t handle PDF files, the display will be blank.
- The embed a pdf HTML code method is used when no fallback content needs to be provided.
Example: This example describes the embedding of a PDF file in HTML using the embed tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>PDF in HTML</title>
</head>
<style>
.pdf {
width: 100%;
aspect-ratio: 4 / 3;
}
.pdf,
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
h1,
h3 {
text-align: center;
}
h1 {
color: green;
}
</style>
<body>
<h1>GeeksforGeeks</h1>
<h3>Embedding the PDF file Using embed Tag</h3>
<embed class="pdf"
src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf"
width="800" height="500">
</body>
</html>
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...