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.
- 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.
Hello Admin, this article you have written here is very informative. Thank you for that. I’m into HTML5 courses in Chennai, and articles like these help me to be up to date on the technology. If anyone is interested in HTML5 courses in Chennai can contact us.
ReplyDeleteThe best thing about HTML5 is that it allows the developers to embed the video files, audio files, and high quality graphics without any third party applications.
ReplyDeletehtml5 training in chennai | html5 training institutes in chennai | Fita Chennai reviews
You can download the trial version from our website for insert pdf into html online, ragpdf.com http://www.tagpdf.com/online/convert-pdf-to-html/ Trial version will have certain limitation for insert pdf into html online with high quality.
ReplyDeleteAmazing! Thank you! :)
ReplyDeletePDF Viewer is a plugin that allows to embed PDF in web pages. Because it is custom coded, the look will be same in all browsers.
ReplyDelete