Menu
I have the code below which is a perfect solution to what I need, which would essentially be embedding any of JPG, GIF, PNG or PDF files in my webpages. It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users.
<iframe src="uploads/test1.pdf" width="auto" height="auto"> </iframe>
Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page. What would be an alternative solution or implementation to this?
325
It works perfectly in PC browsers, but a critical requirement for the pages is to have them compatible in mobile browsers due to its target users. Although image files work fine, PDF files are opened separately in the mobile browser and not embedded inline in the web page.
No browsers can support native rendering of PDF files without a plugin (except Google Chrome as claimed here). But you can you Google Docs Viewer to display PDF files inside a webpage like explained here. Show activity on this post. If embedding isn't important to you you could just link to the PDF on a seperate page.
The simplest one-line solution The best way I found to display a PDF was to use an iframe. iframe stands for inline frame, and it allows you to embed another HTML document within the current one. You can read more about it here.
One simple option is that the the object element provides a fallback, so you can do:
<object data='some.pdf'>
<p>Oops! Your browser doesn't support PDFs!</p>
<p><a href="some.pdf">Download Instead</a></p>
</object>
Then, when the mobile browser can't get the item, it'll just show this and you'll be all set, kinda.
154
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
