We will learn how to embed PDF files in HTML documents and explore their implementation through examples. Sometimes, you may want to insert a PDF file into an HTML document to make the content more interactive. Since HTML and PDF formats are different, embedding PDFs can be a bit challenging.
Method 1: Using Object Tag
- 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.
<!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.
<!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:
Method 3: Using embed tag
- 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 3: This example describes the embedding of a PDF file in HTML using the embed tag.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>PDF in HTML</title>
<style>
<!--Driver Code Ends-->
.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>
</head>
<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>
<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->
Output:
Note: Embedding PDF files in HTML documents can enhance the interactivity of your web content. You can choose from several methods, including the <object>, <iframe>, and <embed> tags, depending on your specific needs and browser compatibility requirements.