How to Embed PDF in HTML

There are several ways for including 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 to Put a PDF Document in HTML

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

Example of embedding a PDF 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>

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 to set also your preferred width and height. To have the code, follow these simple steps:

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

The complete code will be like this:

Example of adding a PDF file to the HTML using <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 users to download your PDF file just add #toolbar=0 after the URL of your PDF document.

Example of embedding 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