How to display PDF file content on the web page?

In several times it may be needed to display a PDF file on a web page. So here in this post, we are going to learn how to display a PDF file on a web page.

Displaying PDF file on a web page is quite easy. Here we are going to see three ways to display PDF file content on the web page. Actually, in each way, we will use 3 different HTML tags.

Print content from a particular div element using jQuery



Locate the Geo-position of a visitor in JavaScript

Display PDF on web page using object tag

Below is the code which shows uses HTML object tag to show the PDF file on a web page:

<object data=”demo.pdf” type=”application/pdf” width=”500″ height=”400″> </object>

Display PDF on web page using HTML embed tag

To show a PDF file on the web page we can also use the HTML embed tag. It will embed the PDF file on that page. Below is the code:

<embed src=”demo.pdf” width=”500″ height=”400″>

Show PDF on the web page using the HTML iframe tag

The iframe tag of HTML uses for displaying the content from another website on the web page. This is so popular HTML tag and also can be used to display PDF file content on a web page. It just needs to provide the URL or path of the PDF just like you can see in the code below:

<iframe src=”demo.pdf” style=”width:500px; height:400px;” frameborder=”0″></iframe>


So we have seen the 3 methods of displaying a PDF file content on a web page in HTML. Which methods you prefer most and why? Please let us know. Below is the comment box where you can comment your answer.

Add or append a new item to an array in JavaScript using push() method

Leave a Reply

Your email address will not be published. Required fields are marked *