Embedding Pdf file in Html (Without JavaScript)

Embedding Pdf file in Html (Without JavaScript)

In this tutorial, we are going to learn about how to embed and view pdf files in Html with the help of a demo.

Object element

In html, we have the <object> element by using that we can embed our pdf file in html without any third-party libraries.

Embedding pdf

This example shows you how to embed pdf file in html using <object> element.

  1. Grab your pdf file link.
  2. Add type attribute with value application/pdf to object element.
  3. Add data attribute with value your pdf link to object element.
  4. Set height and width according to your requirements.
<!DOCTYPE html>
<html>
  <head>
    <title>Embedding pdf</title>
  </head>
  <body>
    <h1>My pdf</h1>
    <object
      type="application/pdf"
      data="https://gahp.net/wp-content/uploads/2017/09/sample.pdf"
      width="600"
      height="700"
    >
    </object>
  </body>
</html>

Output

pdf-embed-output

Demo