by Sai gowtham

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

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
130,921 students enrolled
21 hours of video content
View Course