Hi! Everyone, hope you all are fine.
Today in this post I will tell you how you can embed PDF file into your blog or webpage. Now days PDF files are being used a lot and the uses of it is still increasing. And many people like blogger, developer, etc put PDF file link on the page for visitors but when visitor open it in there browser it takes the entire browser to view even if the page is small then the screen.
Image credit: Icon Finder
Here how you can embed PDF file
- Get the link of the PDF file you want to embed
- Now copy the below code
- Changes to make in code
- Now past the code where you want to embed your PDF file
<embed src="PDF-URL" width="500" height="375"></embed>
i) PDF-URl with your PDF file URL
ii) Change the value of height and width according to your need
Here how your embedded PDF file will look
Note: – If in your computer Adobe Reader plugin is not installed or if you are not using Google Chrome browser then you might not able to view the PDF file embedded, it will show a plugin error and it will ask you to install.
Here few tricks by which you want make the visitors view as you want them to by using some parameters.
After your PDF file URL put # then use any of the following things
toolbar=0 to hide the Tool bar
e.g.: http://img.sjbn.co/files/example-PDF.pdf#toolbar=0
navpanes=0 To hide the navigation bar
e.g.: http://img.sjbn.co/files/example-PDF.pdf#navpanes=0
scrollbar=0 to hide the scroll bar
e.g.: http://img.sjbn.co/files/example-PDF.pdf#scrollbar=0
search=word to show the searches of the word you want
e.g.: http://img.sjbn.co/files/example-PDF.pdf#search=word
If you want to use more than one from the above use & after each
e.g.: http://img.sjbn.co/files/example-PDF.pdf#scrollbar=0&navpanes=0&toolbar=0&search=word
Note: – You may or may not able to view in Google Chrome as because Google Chrome has its own PDF viewer so it don’t use Adobe reader plugin. However you can still make it work in Google Chrome by using iframe tag instead of embed tag (it will also work in other browsers).
Here a demo using iframe tag
If you have any questions or problem let me know
Hey Saket. This is very useful information. I have needed to embed pdf's in the past but didn't have a clue how to do it. Great step by step instruction. Keep it up!
Andy
@Andy Thanks, if you need any help in anything in which I can help let me know…
@Praveen Thanks… 🙂
Good share dude, 🙂 i will make us of it one of my posts
Hey, thanks for a great instruction, if been trying to find a solution for the google crome issue. but for me it doesn´t seem to work…if i use the iframe tag the entire design crumbles into a 10% version as seen here: http://d.pr/KQmx (when I use the embed tag it won´t display the pdf´s as expected, but at least the site looks the same…)
in firefox it looks like this: (both with iframe/embed)
http://d.pr/eSCu
code for tha area looks like this:
http://d.pr/Yh34
any suggestions? I am clueless:(
all the best from berlin
Welcome and Thanks for your comment…
Like your effort…
Hi Saket.
Yes its good but personally I would still prefer to use Macromedia Flash Paper as a substitute for the PDF building http://www.adobe.com/products/flashpaper/. There are few problems of using PDF in website. The PDF file size is heavier as compared to any swf file so the loading time is an issue. Also iframe is not recommended for use. Try to use include instead.
Thanks and great work from your end keep up.
As I also show some problems while using this so I have given some other methods to embed PDF like using Google Dcos (https://jajodia-saket.sjbn.co/2011/03/edit-any-pdf-files-using-google-docs/) but they need iframe tag.. And there are some more services which helps in embedding PDF files I will sthortly write about it. Also I will look into Adobe Flash Paper. Thanks a lot for your tips and comment, Sir.. 🙂
Thanks for the useful article. Scrolling problem in ff. It actually scrolls the pdf rather than the page scrollbar. any fix would be appreciated. Thanks.
I have checked when page loads in a web browser which use Adobe Reader to display PDF, by default Adobe will takes the selection on the first embedded PDF on the page, so instead of page PDF starts scrolling so you need to click anywhere out side the page to make the page scroll but in Firefox this bug extended more it don't work even when you click outside the page, so to bring the selection on the page you need to click on any link then only selection will come on the page. Hope this info will help you. 🙂
Hello!
I'm reading your "How to Embed PDF File" blog, but for some reason I cannot see these two parts of your article:
Here how your embedded PDF file will look:
and
Here a demo using iframe tag:
(I'm using Firefox, if that makes a difference.) Any suggestions?
Thanks!
Must be because Adobe Reader is not installed in your computer or Adobe Reader plugin is disable.
Hello again!
Checked: Reader is installed and the Reader plugin is enabled. It's very strange. I really want to see the whole thing.
Any other suggestions?
Thanks!
When I am viewing them on my computer using Firefox (on Windows), its working fine. Sorry, couldn't able to tel the reason. Try to re-install latest version of Adobe Reader on your computer.
This is so frustrating! All my versions are the latest; I just can't see all of your post on your blog page, and I can't figure it out.
Is there a way you could email me your "Embed PDF File" post? Maybe in PDF format?
Thank you so, so much.
There is nothing to see in those PDF embedded on this page, those are just for demo.