Recommended way to embed PDF in HTML?


To embed a PDF in HTML is an easy task and there are various ways. Let us see them one by one.

  • Embed PDF in HTML using iframe.
  • Embed PDF in HTML using the embed tag.
  • Embed PDF in HTML using the object tag.

Embed PDF in HTML using iframe

Set the src attribute of the iframe tag and add the link of the PDF to embed −

<iframe src="https://www.tutorialspoint.com/python3/python3_tutorial.pdf" width="700" height="500">
</iframe>

Example

Let us now see an example to ember PDF using <iframe> −

<!DOCTYPE html>
<html>
<head>
   <title>Embed PDF</title>
</head>
<body>
   <center>
      <h1>Python by Tutorialspoint</h1>
      <p>Below is a preview of the Python Tutorial:</p>
      <iframe src="https://www.tutorialspoint.com/python3/python3_tutorial.pdf" width="700" height="500">
      </iframe>
   </center>
</body>
</html>

Output

Embed PDF in HTML using the embed tag

We can also embed PDF using the <embed> tag −

<embed src="https://www.tutorialspoint.com/java/java_tutorial.pdf" width="700" height="500">

Example

Let us now see an example to embed PDF using the embed tag −

<!DOCTYPE html>
<html>
<head>
   <title>Embed PDF</title>
</head>
<body>
   <center>
      <h1>Java by Tutorialspoint</h1>
      <p>Below is a preview of the Java Tutorial:</p>
      <embed src="https://www.tutorialspoint.com/java/java_tutorial.pdf" width="700" height="500">
   </center>
</body>
</html>

Output

Embed PDF in HTML using the object tag

We can embed PDF using the <object> tag. The data attribute of the object data is where you need to place the link of the PDF file to be embedded −

<object data="https://www.tutorialspoint.com/android/android_tutorial.pdf" width="700" height="500">

Example

Let us now see an example to embed PDF using the object tag −

<!DOCTYPE html>
<html>
<head>
   <title>Embed PDF</title>
</head>
<body>
   <center>
      <h1>Android by Tutorialspoint</h1>
      <p>Below is a preview of the Android Tutorial:</p>
      <object data="https://www.tutorialspoint.com/android/android_tutorial.pdf" width="700" height="500">
   </center>
</body>
</html>

Output

Updated on: 06-Dec-2022

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements