How to Embed PDF Document in HTML Page

This tutorial will show you how to insert a PDF file into a web page. To display a pdf file in a web application, we’ll utilize the HTML embed tag.

It’s too simple and straightforward to utilize without the need for a third-party library. You can use any programming language that provides a web page to implement it.

Video Tutorial:

If you are more comfortable in watching a video that explains How To Embed PDF on Web Page, then you should watch this video tutorial.

Embed PDF File in HTML

In a modal popup, I utilized an anchor link to display a PDF file. However, this helps in the presentation of a PDF document on a web page. An HTML anchor link is the easiest way to display a PDF file. HTML 4 introduces the embed tag, which is the best solution for embedding PDF documents on a website.

Let’s use the HTML embed tag to embed a PDF file into a web page.

A container for an external resource, such as a web page, a photograph, a media player, or a plug-in application, is defined by the HTML embed element. The embed tag allows you to specify the following arguments.

src – The location of the external file that will be embedded.
type – The embedded content’s media type.
width – The width of the embedded content.

height – The height of the embedded content.

Embed PDF File in Web Page

In the project folder, I created a index.html file. To embed a PDF file in an HTML web page, we’ll use the following code.

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

PDF Document View Configuration

On the web page, we can also control how the pdf document is viewed. There are a variety of characteristics that can be used to display PDF documents.

To embed a PDF file in HTML or open it in the browser, use the following arguments.

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.Actions are performed in order from left to right, with subsequent actions overriding prior ones.

phpflow.com/pdf_view/test_doc.pdf#page=5
phpflow.com/pdf_view/test_doc
phpflow.com/doc.pdf#Chapter5
phpflow.com/doc.pdf#page=3&zoom=100,200,150
phpflow.com/doc.pdf#zoom=200
phpflow.com/doc.pdf#page=2&view=fitH,150

How To Disable OR Hide Toolbar in PDF Web Viewer

When we need to conceal the toolbar on a PDF viewer, we’ll use the following code to embed PDF documents in a web page and hide or remove the embedded PDF’s toolbar.

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

Option2 : Ebmbed PDF into Web Page Using Object

The 'object' tag you would be focusing on is ‘object’ which will be used to embed a pdf html code into a webpage.it can also be used to embed ActiveX, Flash, video, audio, and Java applets.

<object data="pdf/doc.pdf#page=2" type="application/pdf" width="100%" height="100%">

Option3 : Ebmbed PDF into HTML Page Using Object

We can also embed PDF file using 'iframe', The 'iframe' tag is widely used by many website designers to embed a pdf html code into a webpage. This tag can also be used to embed a pdf html code if the browser does not support PDF documents or embed a pdf HTML code.

<iframe src="pdf/doc.pdf#page=2" width="100%" height="100%">