How to Embed PDF file into the HTML Web Pages

Pradeep Maurya

When we want to embed a pdf document in the html web pages, we take help of a hyperlink to make a linkage of PDF documents to show them in the browser. The easiest way to display a PDF file is to use HTML anchor link. What if you want to display a PDF document on the web page? If it is really so, then PDF files needs to be embedded in HTML. A tag <embed> is the most suitable option to embed the PDF document on the web page. Further in this blog post, you will have a look on how to display PDF file in the web page using <embed> tag. But, before moving ahead, first understand what does <embed> tag do. The tag is used to create an embedded panel in which a third-party application, such as a flash based object, can run.

Or, in the most simple language, the html <embed> tag explains a container to load external content. The below listed parameters can specify <embed> tag.

  • type- Indicates the media type of the embedded content
  • height- Indicates the height of the embedded content
  • width- Indicates the width of the embedded content
  • src- Indicates the path of the external file to embed

With the help of a mentioned code below you can embed PDF file in the HTML web page:

Above was the code to embed the PDF file in the HTML web page. But, how you can control the PDF document vision on the web page is the important thing to know. If you are not well known about the control process, keep reading ahead.

With the help of parameters in URL, you can indicate exactly what do show and how to showcase PDF document. The following parameters that are commonly used to embed PDF file in HTML are:

  • page=pagenum- Your document’s first page should have a pagenum value of 1. It specifies a number (integer) of the page in the document
  • view=Fit- It is used to set the view of the displayed page
  • toolbar=1 | 0- It is used to indicate the on or off of the toolbar
  • navpanes= 1 |0- It specifies the turning of navigation panes and tabs on or off
  • scrollbar= 1|0- Indicates whether the scrollbars is to be turned on or off
  • statusbar= 1 |0- Specifies the on or off of status bar
  • zoom=scale- Situates the zoom and scroll issues, using float or integer values. Let’s assume a scale value of 100 indicates a zoom value of 100%

Above were the parameters that can be used to control the view of the PDF file. But, you can indicate numerous parameters in URL. Each parameter can be given a separation with either an ampersand (&) or a pound (#) character. Actions are implemented from left to right and afterward actions will override the last actions. And, if you want that your toolbar does not show or gets removed of your PDF file when opened in HTML, use the following code:

We hope that you might have come across the concept easily. For any confusions do write us below in the comments.

Related posts