Author -  Sai gowtham

Embedding Pdf file in Html (Without JavaScript)

html1min read

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

Similar tutorials

How to hide the div element in HTMLHow to create a Download Link in HTMLHow to copy Html code from a website in ChromeHow to add a placeholder to select element in htmlSet the text size of a button in HTMLHow to select a element using data attribute in JavaScript

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY