How to Embed PDF in html

Last Updated On: | By: Parvez

This tutorial help to embed pdf into web page.We will use html embed tag to display pdf file into web application.Its too simple and easy to use without any third party library dependency.You can implement it with any programming language which has a web page.

I had used anchor link to display a PDF file in modal popup.But this help to display a PDF document into the web page.The HTML 4 introduced embed tag, that is the best option to embed PDF document on the web page.

Let’s display PDF file in the web page using HTML embed tag.

The HTML embed tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.There are following parameters can be specified in the embed tag.

  • src – The path of the external file to embed.
  • type – The media type of the embedded content.
  • width – The width of the embedded content.
  • height – The height of the embedded content.

Embed PDF File in HTML

Created a index.html file into the project folder.We’ll add following code to embed PDF file in the HTML web page.

PHP
1
<embed src="files/test.pdf" type="application/pdf" width="100%" height="800px" />

PDF Document View Configuration

We can also control pdf document view on the web page.There are number of parameters available that help to display PDF documents.

The following parameters are commonly used to embed PDF file in HTML or open in the browser.

  • page=pagenum – Specifies a number (integer) of the page in the document. The document’s first page has a pagenum value of 1.
  • zoom=scale – Sets the zoom and scroll factors, using float or integer values. For example, a scale value of 100 indicates a zoom value of 100%.
  • view=Fit – Set the view of the displayed page.
  • scrollbar=1|0 – Turns scrollbars on or off.
  • toolbar=1|0 – Turns the toolbar on or off.
  • statusbar=1|0 – Turns the status bar on or off.
  • navpanes=1|0 – Turns the navigation panes and tabs on or off.

How To Specify Parameter in URL

You can pass multiple parameters in the URL.The Each parameter should be separated with either an ampersand (&) or a pound (#) character.

PHP
1
2
phpflow.com/pdf_view/test_doc.pdf#page=5
phpflow.com/pdf_view/test_doc

How To Disable OR Hide Toolbar in PDF Web Viewer

Sometime, we need to hide the toolbar on PDF viewer, We will use the following code to embed PDF document in the web page and remove or hide toolbar of embedded PDF.

PHP
1
<embed src="files/test.pdf#toolbar=0&scrollbar=0" type="application/pdf" width="100%" height="600px" />