instead of using iframe and depending on the third party`think about using flexpaper, or pdf.js.
I used PDF.js, it works fine for me. Here is the demo.
You can also have this simple GoogleDoc approach.
<a style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>
This would create a new page for you to view the doc without distorting your flow.
You can also embed using JavaScript through a third-party solution like PDFObject.
The browser's plugin controls those settings, so you can't force it. However, you can do a simple <a href="whatver.pdf">
instead of <a href="whatever.pdf" target="_blank">
.
You can use the <embed>
tag with the source of the file in the src
attribute. This uses the native browser PDF viewer.
<embed src="your_pdf_src" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
Live example:
<embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">
_x000D_
Loading the PDF inside a snippet won't work, since the frame into which the plugin is loading is sandboxed.
Tested in Chrome and Firefox. See it in action.
The simplest way is to create an iframe and set the source to the URL of the PDF.
(ducks mad HTML designers) Done it myself, works fine, cross browser (crawls into bunker).
Have you tried using a simple img tag?
<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">
You can use this code:
<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">
Or use Google Docs embeddable PDF viewer:
<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true"
style="width:600px; height:500px;" frameborder="0"></iframe>
We render the PDF file pages as PNG files on the server using JPedal (a java library). That, combined with some javascript, gives us high control over visualization and navigation.
Displaying content saved in PDF/DOC/DOCX file format is ideal for displaying the pdf/doc/docx file on your web page
The simple solution is to put it in an iframe and hope that the user has a plug-in that supports it.
(I don't, the Acrobat plugin has been such a resource hog and source of instability that I make a point to remove it from any browser that it touches).
The complicated, but relative popular solution is to display it in a flash applet.
preffered using the object tag
<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1'
type='application/pdf'
width='100%'
height='700px'>
note that you can change the width and height to any value you please visit http://www.w3schools.com/tags/tag_object.asp
As long as you host the PDF the target attribute is the way to go. In other words, for relative files, using the target attribute with _blank value will work just fine.
<e>
<a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>
For absolute paths engines will go to the Unified Resource Locator and open it their. So, suppress the target attribute.
<e>
<a alt="StackExchange Handbook" title="StackExchange Handbook"
href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>
Browsers will make a rely good job in both cases.
I recently needed to provide a more mobile-friendly, responsive version of a .pdf document, because narrow phone screens required scrolling right and left a lot. To allow just vertical scrolling and avoid horizontal scrolling, the following steps worked for me:
The result looked good and was usable in both desktop and mobile environments.
Source: Stackoverflow.com