Embed Pdf In Mobile Browsers

June 28, 2023 Post a Comment

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 br

Solution 1:

You can use PDFJs library. Using just JS you can render pdf files. Please , check here : https://mozilla.github.io/pdf.js/

Solution 2:

One simple option is that the the object element provides a fallback, so you can do:

<objectdata='some.pdf'><p>Oops! Your browser doesn't support PDFs!</p><p><ahref="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.

Solution 3:

Here is my solution to this problem.

<object data="mypdf.pdf"type="application/pdf" frameborder="0" width="100%" height="600px" style="padding: 20px;">
    <embedsrc="https://drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing"width="100%"height="600px"/> 
</object>

Explanation:<object> tag has a feature that when it is unable to load item, it loads the content inside itself i.e tag. Since object tag cannot load on mobile view, therefore on mobile devices, embed tag will become active.

Q) Why can't we directly use tag for all cases?

You can actually, but since the embed tag is loading file from drive, it does not gives any user controls for the pdf that we see with object tag (zoom, page no., etc.). So our code will give the user pdf view controls atleast in the desktop mode instead of not giving any controls at all.

Q) Direct drive links don't work....so why this solution?

In the above google drive URL, view is changed to preview. drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/view?usp=sharingbecomes, drive.google.com/file/d/1CRFdbp6uBDE-YKJFaqRm4uy9Z4wgMS7H/preview?usp=sharing

So, we can make direct drive links work with this little modification

Solution 4:

Using Adobe PDF Embed API solved my problem. Adobe PDF Embed API

Solution 5:

Google Docs viewer offers a feature, that lets you embed PDF files and PowerPoint presentations on a web page.

<iframesrc="https://docs.google.com/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true"style="width:100%; height:650px;"frameborder="0"></iframe>

replace the URL(http://infolab.stanford.edu/pub/papers/google.pdf) with your own address, It's worked for me but it takes more time to load on

src:http://googlesystem.blogspot.com/2009/09/embeddable-google-document-viewer.html?utm_source=pocket_mylist

Html5 Library