How to Embed PDF File in HTML Page

Hi, today we’ll see how to embed pdf file in a html page directly. Some websites tend to show pdf files directly on their site’s webpages instead of giving a download link for the files. Thanks to HTML5, you can also do the same with simple html code without using any third party solutions. The method we are going to see is the quick and easy solution which gives you some control over how the pdf file is shown to the user. Also it works on all modern web browsers that support HTML5.

How to Embed PDF File in HTML Page

HTML5 provides <embed> element which acts as a container for external application like image, videos, mp3 files or other multimedia objects. Using this tag makes the browser to automatically include controls for the multimedia objects (in case the browser supports the particular media type).

We are going to use this <embed> tag to show the pdf files in the web page without using complex third party scripts. Open the html page in which you want to embed the file and include the below markup wherever you want the pdf file to be shown.

<embed width="600" height="450" src="mypdf.pdf" type="application/pdf"></embed>

The attributes width and height represents the width and height of the pdf container in pixels.

The attribute src is the path to the pdf file to be embedded.

The attribute type is the media type of the embedded content.

Now you open the file in browser and the pdf file is shown in the html page like this.

Read Also:

• Drag and Drop Multiple File Upload with Progress Bar using PHP & jQuery
• How to Display JSON File in HTML Table using jQuery DataTables Plug-in

I hope you like this simple solution to embed the pdf files in website’s html page without hassle.