How to Embed PDF Document in HTML Web Page

Generally, a hyperlink is used to link a PDF document to display in the browser. An HTML anchor link is the easiest way to display a PDF file. But if you want to display a PDF document on the web page, PDF file needs 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 in the web page. The following parameters can be specified in the <embed> tag.

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

Embed PDF File in HTML

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

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

PDF Document View Configuration

Now we will show how you can control the PDF document view on the web page. Using parameters in the URL, you can specify exactly what to display and how 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.

Specifying Parameters in URL

You can specify multiple parameters in the 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.

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" />

Convert HTML to PDF using JavaScript

Are you want to get implementation help, or modify or enhance the functionality of this script? Submit Paid Service Request

If you have any questions about this script, submit it to our QA community - Ask Question