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 'object' tag.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Try it Yourself »

Result

PDF Example

Open a PDF file example.

How to embed PDF viewer in HTML

You could try embedding the PDF file in an 'object' tag. Here is an example of how to do this:

Example of adding a PDF file to the HTML by using the '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 »

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.
An alternative strategy to consider is the use of CloudPDF, a unique cloud-based service designed specifically to protect PDF files from unauthorized downloads. Similar to PDF.js, CloudPDF provides a platform for viewing PDF files within the browser, but sets itself apart by disabling the download functionality for viewers, adding an extra layer of document control. CloudPDF achieves this through server-side rendering, a technique that prevents the PDF from being directly transferred or displayed in the client's browser, making it more difficult for the document to be accessed via developer tools or page source inspection, thereby enhancing security significantly.

While it's important to note that no method is foolproof, the features provided by CloudPDF notably elevate the difficulty level for unauthorized access, making it a worthy consideration for those seeking enhanced document security.