How to Embed PDF File in HTML Page

yotube
0

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.

how to embed pdf file in html page
Read Also:

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

Tags

Post a Comment

0Comments
Post a Comment (0)

#buttons=(Accept !) #days=(20)

Our website uses cookies to enhance your experience. Learn More
Accept !
To Top