Embed PDF in HTML – Display a PDF File in HTML Web Page

In this tutorial, You will learn How to Embed PDF in HTML. It is very important if you want to display a PDF file on your web page. You need not use javaScript for implementing this concept. It will be easily set up by using only HTML.

Generally, The Users want to read some content in PDF file on the web page. They don’t want to click any link to open/ download the pdf file. So, you will have to embed a pdf file in HTML.

how to embed pdf in html

 

How to Display PDF File in HTML Web Page

You should display PDF on the HTML web page if you have to show important information. But you should not use pdf as a web page of the website. Because it does not work as a responsive page. Event It will not show large information in a good format.

Learn more – 

Convert HTML to PDF in JavaScript

Export HTML Table Data to Excel File Using JavaScript

There are many ways to embed PDF into HTML. But you can use one of the following options

1. Embed PDF Using <a> Tag

The anchor tag is the simplest option to embed PDF to HTML. But It displays PDF whenever it will be clicked. If you want to show PDF content after clicking the link, you can use it.

Syntax-

<a href="PDF address">Some Text</a>

Example –

<a href="/uploads/userinfo.pdf"> Open PDF </a>

In the above example, you have to enter your PDF address where it is saved.

2. Embed PDF in HTML iframe

iFrame Tag is a frequently used option to embed a PDF in HTML5. It is used by maximum developers. So, you should use this way.

Syntax –

<iframe src="pdf address"></iframe>

Example –

<iframe src="/uploads/userinfo.pdf"></iframe>

Even, You can use width & height  attribute to set iframe size

<iframe src="/uploads/userinfo.pdf" width="100%" height="600px"></iframe>

In the above example, you have to enter your pdf address where it is saved.

3. Embed PDF Using <embed> Tag

Embed Tag is the standard and easy option to embed PDF in HTML code. It works as an iframe. but It has no closing tag.

Syntax- 

<embed src="pdf address" />

Example-

<embed src="/uploads/userinfo.pdf" />

You can use width, height, & type attribute within the embed tag.

<embed src="/uploads/userinfo.pdf" width="600px" height="500px" type="application/pdf" />

4. Embed PDF Using <object> Tag

Object Tag is also a more useful option to embed PDF using HTML. But It might come with the anchor tag.

Even you can define pdf with an anchor tag within the object tag. But It will show pdf when the embed tag does not work.

Syntax-

<object data="pdf address">
  <a href="pdf address">some text</a>
</object>

Example-

<object data="/uploads/userinfo.pdf">
  <a href="/uploads/userinfo.pdf">Open PDF</a>
</object>

You can use width, height, & type attribute within the embed tag.

<object data="/uploads/userinfo.pdf" width="600px" height="500px" type="application/pdf"> 
<a href="/uploads/userinfo.pdf">Open PDF</a>
</object>

PDF View Setting in HTML Web Page

  • You can use the following parameters with PDF address. These parameters will decide how to display the PDF file on the web page.

PDF Page Number

You can represent the number of pdf pages in the HTML document by using the following parameters.

page=num  //where num is a positive integer value

Example-

/uploads/userinfo.pdf#page=1 //  It represnts the first pdf page
/uploads/userinfo.pdf#page=2 //  It represent the second pdf page
/uploads/userinfo.pdf#page=3  // It represent the third pdf page

PDF View

You can set the PDF view in HTML web page through the following parameter.

view=Fit
view=FitH
view=FitH,top
view=FitV
view=FitV,left
view=FitB
view=FitBH
view=FitBH,top
view=FitBV
view=FitBV,left

Example –

/uploads/userinfo.pdf#view=fitH,200

PDF Scrollbar

You can turn hide or show the scrollbar by using the following parameter

scrollbar=0  // It will turn hide the scrollbar
scrollbar=1  // It will turn show the scrollbar

Example –

/uploads/userinfo.pdf#scrollbar=0
/uploads/userinfo.pdf#scrollbar=1

PDF Toolbar

You can turn hide or show the toolbar by using the following parameter

toolbar=0  // It will turn hide the toolbar
toolbar=1  // It will turn show the toolbar

Example –

/uploads/userinfo.pdf#toolbar=0
/uploads/userinfo.pdf#toolbar=1

PDF Statusbar

You can turn hide or show the status bar by using the following parameter

statusbar=0  // It will turn hide the statusbar
statusbar=1  // It will turn show the  statusbar

Example –

/uploads/userinfo.pdf#scrollbar=0
/uploads/userinfo.pdf#scrollbar=1

PDF Nav Panes

You can turn hide or show the navigation panes & tabs by using the following parameter

navpanes=0  // It will turn hide the navpanes
navpanes=1  // It will turn show the navpanes

Example –

/uploads/userinfo.pdf#navpanes=0
/uploads/userinfo.pdf#navpanes=1

PDF Zoom

You can set the zoom level & scroll factors by using the following parameter. Zoom value must be integer or float.

zoom=scale
zoom=scale,left,top

Example-

/uploads/userinfo.pdf#zoom=100
/uploads/userinfo.pdf#zoom=100,150,350
  • You can use more than one parameter with a PDF address. But each parameter must be separated by an ampersand (#)

Example –

/uploads/userinfo.pdf#page=3
/uploads/userinfo.pdf#page=3&zoom=100,150,350
/uploads/userinfo.pdf#zoom=100
/uploads/userinfo.pdf#page=72&view=fitH,200

 

How to Embed PDF in HTML without Download

If you want to embed PDF in HTML without download, you will have to use #toolbar=0 with PDF address. It disables the option to download the PDF and also hides the toolbar option. In this way, nobody can’t download the PDF from the web page.

/uploads/userinfo.pdf#toolbar=100

Example –

<iframe src="/uploads/userinfo.pdf#toolbar"></iframe>

 

Suggestion

Dear Developer, I hope that you have known how to embed a PDF in HTML page. Now, you can easily implement it in your web page. If you have any questions, you can ask me through the below comment box

Continue to visit my blog and share it with your friends. I will share more tutorials related to web technology. Therefore, you will learn more web coding on this blog site.

Leave a Comment