How to Embed PDF in HTML

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

Using the <embed>, <object>, or <iframe> tags, which are standard HTML5 elements for embedding external content.
Using the <a> tag, which creates a direct link to the PDF rather than embedding it inline.

Ways of putting a PDF document in HTML

The easiest way to link to a PDF file in an HTML document is using the <a> tag with its <span class="attribute">href</span> 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:

Example of How to Embed PDF in HTML

<!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>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5 not-prose"> PDF ExampleOpen a PDF file example.

</div> ## How to embed PDF viewer in HTML

You can also embed the PDF file directly in the page using the <object> tag. Here is an example of how to do this:

Example of embedding a PDF with the HTML `<object>` tag:

<!DOCTYPE html>
<html>
  <head>
    <title>PDF Example by Object Tag</title>
  </head>
  <body>
    <h1>PDF Example by Object Tag</h1>
    <object data="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf" type="application/pdf" width="100%" height="500px">
      <p>Unable to display PDF file. <a href="/uploads/media/default/0001/01/540cb75550adf33f281f29132dddd14fded85bfc.pdf">Download</a> instead.</p>
    </object>
  </body>
</html>

Try it Yourself »

<amp-ad class="show-xsm" data-ad-client="ca-pub-1328390942002432" data-ad-slot="9944850238" height="250" layout="fixed-height" type="adsense" width="auto"> XFI2 </div> </amp-ad> <amp-ad class="hide-xsm" data-ad-client="ca-pub-1328390942002432" data-ad-slot="9944850238" data-auto-format="rspv" data-full-width="" height="320" type="adsense" width="100vw"> XFI3 </div> </amp-ad>

This code will display the PDF file in an object element in the HTML page. If the browser is unable to display the PDF file, it will show a fallback message with a download link.

Can we prevent the pdf from downloading?

Unfortunately, it is not possible to completely prevent a user from downloading a PDF file that is embedded in an HTML page. Even if you disable the right-click context menu, a user can still access the PDF file through the browser's developer tools or by inspecting the page source.

However, you can make it more difficult for a user to download the PDF file by using various methods, such as:

Converting the PDF file to an image format (such as JPEG or PNG) using a tool like ImageMagick or Ghostscript, and displaying the images in an HTML page. This way, the user will not be able to download the original PDF file directly, but they can still download the images.
Using a JavaScript PDF viewer library like PDF.js, which can display PDF files in an HTML page using the browser's built-in PDF rendering capabilities. You can customize the viewer to disable downloading and printing, but as I mentioned earlier, it is still possible for a user to access the PDF file through the browser's developer tools or by inspecting the page source.