How to Embed PDF Document in HTML Web Page

Solution Doodz September 28, 2021



Generally, a hyperlink is used to link a PDF document to display in the browser. HTML anchor link is the easiest way to display a PDF file. But if you want to display PDF document on the web page, PDF file need to be embedded in HTML. The HTML <embed> tag is the best option to embed PDF document on the web page. In this tutorial, we will show you how to display PDF file in the web page using HTML <embed> tag.

The HTML <embed> tag defines a container to load external content. The following parameters can be specified in <embed> tag.

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

Embed PDF File in HTML

Use the following code to embed PDF file in the HTML web page.

<embed src="files/Brochure.pdf" type="application/pdf" width="100%" height="600px" />

Now we will show how you can control the PDF document view on the web page. Using parameters in URL, you can specify exactly what to display and how to display PDF document.

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.

Specifying Parameters in a URL

You can specify multiple parameters in URL. Each parameter should be separated with either an ampersand (&) or a pound (#) character. Actions are executed from left to right and later actions will override the previous actions.

URL with parameters looks like the following.

http://example.com/doc.pdf#Chapter5
http://example.com/doc.pdf#page=5
http://example.com/doc.pdf#page=3&zoom=200,250,100
http://example.com/doc.pdf#zoom=100
http://example.com/doc.pdf#page=72&view=fitH,100

Disable and Hide Toolbar in PDF Web Viewer

This example shows how to hide or remove the toolbar, navpanes, and scrollbar of the PDF file opened in HTML <embed> using parameters in URL.
Use the following code to embed PDF document in the web page and remove or hide toolbar of embedded PDF. 

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

Post a Comment

0 Comments