How to Embed PDF in HTML

There are several ways to include a PDF file in your HTML document:

  • Using the <embed> and <object> tags, which are considered to be old-fashioned ways, because they are deprecated now.
  • Using the <a> or the <iframe> tag.

Ways of putting a PDF document in HTML

The easiest way to put PDF in an HTML document is using the <a> tag with its href attribute. You need to add the URL or the reference link of your PDF file to the element. Your code will look like the following.

Example of embedding a PDF file in an HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>PDF Example</h1>
    <p>Open a PDF file <a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">example</a>.</p>
  </body>
</html>

Result

PDF Example

Open a PDF file example.

How to embed PDF viewer in HTML

Another way of adding a PDF file to your HTML document is using the <iframe> tag. It allows setting your preferred width and height as well. To have the code, follow these simple steps:

  1. To specify the web address of your PDF file, set the source. Both of the mentioned properties can be specified by "px", "cm", "vh", or percentages.
<iframe src="URL"></iframe>
  1. To define the size of the iframe, set the height and width attributes:
<iframe src="URL" height="200" width="300"></iframe>

The complete code will be like this.

Example of adding a PDF file to the HTML by using the <iframe> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>PDF Example with iframe</h1>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" width="100%" height="500px">
    </iframe>
  </body>
</html>

If you don’t want the users to download your PDF file, add #toolbar=0 after the URL of your PDF document.

Example of putting an undownloadable PDF file in HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>How to disable downloading of the PDF document</h1>
    <iframe src="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf#toolbar=0" width="100%" height="500px">
    </iframe>
  </body>
</html>

Do you find this helpful?

Related articles