I am not satisfied with the browsers internal behaviour of displaying PDFs. I would like to provide my users with an easy yet stylish PDF viewing experience on my sites. Something like Scribd, but managable and unter full security and control on my server.
I could provide inline links to GoogleDocsViewer or ZohoViewer. Or convert the PDF right after its upload with SWFTools and show the swf with native PHP or HTML5.
Anyway, somehow, after hours of reading and thinking, I am just not happy with any of the above approaches.
Any suggestions?
Generally, a hyperlink is used to link a PDF document to display in the browser. An HTML anchor link is the easiest way to display a PDF file. But if you want to display a PDF document on the web page, PDF file needs to be embedded in HTML. The HTML <embed> tag is the best option to embed PDF document on the web page.
The easiest way to put PDF in an HTML document is using the <a> tag with its href attribute. You need to add the URL or the reference link of your PDF file to the element.
You can use the Javascript library PDF. JS to display a PDF inside a div. The size of the PDF can be adjusted according to the size of the div. You can also setup event handlers for moving to next / previous pages of the PDF.
Take a look at Google Docs Viewer. The following code will help you (untested):
<iframe src="http://docs.google.com/gview?embedded=true&url=PDF-URL" style="width:600px; height:500px;" frameborder="0"></iframe>
Update 13.09.2016: Google removed their generator. Even though, you can still use the viewer by appending the escaped document-url to the url above manually.
I had to do something similar and finally I opted for generating images with ImageMagick, its works exactly the same way like Google Viewer.
But, if you want, you still can try to use PDF.js its from Mozilla and want to replace de browser PDF plugin.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With