How to embed PDF document in HTML page ?

H

One or the other time you might want to embed PDF document in HTML page or either on your blog page. Here I came across such situation and embedded a PDF document in a web page and wanted to share the possible ways we can embed a document .

Method 1 : Directly using HTML tagsĀ  with document URL

It is very simple to embed your document in HTML page , All you need to do is upload the document and get the exact URL of the document. Once you get the exact URL use any of the following syntax to embed the document in HTML page but the restriction is that the browser on which the user is trying to see the document must contain a PDF plugin installed.

Object Tag :

[html]

<object data="Document_Name.pdf" type="application/pdf" width="100%" height="100%">
There is problem in opening file instead you can download file from here<a href="Document_Name.pdf">click here to
download the PDF file.</a>
</object>

[/html]

IFRAME Tag

[html]

<iframe src = "Document_Name.pdf" width = "100%" height = "100%"></iframe>

[/html]

Where height and width properties of the above tag specify what should be the height and width of your PDF document.

Method 2 : SCRIBD.COM – Uploading to document Library

Scribd.com is one of the popular document library which allows you to upload your documents and share it with the community and you have an option of uploading the document as private where the document can only be shared with the users who have exact URL. Once you upload your document you will be provided with embed code which you need to exactly copy it and paste it in your HTML page. The advantage of using SCRIBD.COM is that you have control over who can see your document and the document can be embedded either by using HTML directly or by FLASH and you needĀ  not worry about the PDF plugin as in the above case. Just signup for scribd and upload the document to get embed code for the PDF.

Once you open the document you have uploaded, you will find the embed option showing at the top of the document

embed pdf document in html

Once you click on the embed option shown in above screen shot you will be shown with embed options

Embed type

As you can see from the above options , you have more control over your document using SCRIBD rather than directly embedding it using HTML tags, So just think about it.

Hope you got the solution for what you have came here.

About the author

pavankumar.p1990
By pavankumar.p1990