How to support PDF viewing for all mobile browser? - android

I am using
<object>
to embed a pdf file on my website. e.g.
<object data="abc.pdf" type="application/pdf">
<embed src="abc.pdf" type="application/pdf" />
</object>
It works on all desktop browser, but on my android device, it does not show anything. Besides using the google pdf viewer (since it down-grade dramatically the pdf quality), are there any way to support all ios / android device browser? Or, what is the best way to handle this situation? Since there are lots of browser , How can I redirect them to the browser's pdf plugin download page , or should I just tell them to get one ? (Less user friendly). Thanks

The best way is just too just add a link to the abc.pdf it will open on a new tab.
This would work best for mobile browser rather than embeding or implementing plugins.
ABC PDF file

One cross-platform solution I've found is ViewerJS.
Android-compatible embedding can be accomplished using an iFrame by providing both the URL to the ViewerJS project folder and the URL to the PDF to be embedded (relative to ViewerJS), separated by a hash:
<iframe src='../ViewerJS/#../../pdfs/pdf.pdf'></iframe>

Better to use Google's Gview. I was having the same problem in my project: PDF was opening separately in mobile browsers, whereas it was opening perfectly in web, so I changed it to use Google Doc Gview. Example is given below:
<iframe src="http://docs.google.com/gview?
url=d11xs62myk100c.cloudfront.net/Conference/262/Misc/marcos-ascensin-spanish-national-research-council-csic-spain.ppt&embedded=true'}"
frameborder="0" width="100%" height="1000">
</iframe>

you can check the compability of your mobile then download and save as .dox

Related

PDF in the iframe triggering download automatically

I have below iframe in one of the page in my website.
<iframe src="http://www.pdf995.com/samples/pdf.pdf" id="iframe1">
But when I open same page in android mobiles chrome browser it is automatically triggering download of file which is mentioned in the iframe. How can I prevent auto triggering of download in mobile devices?
You can use this format:
https://docs.google.com/viewerng/viewer?url=http://yourfile.pdf
Just replace http://yourfile.pdf with the link you use.
Ideally, it is important to think on the availability to use the convert/viewer in offline mode!
Why and Because...
If you use an iframe for a stored document on your server and you would made an webapp, you will must play over HTTPS/SSL. (Offline is over https).
It is not sure that the PDF viewer provides a secure url (1), you will probably problems with CORS and others with the « Same origine » to embed the iframe src (2), and finally, it service must delivers online and offline ! So it recommended to embed in application cache all the resources needed to convert the PDF in canvas.
An all in one solution is strongly recommended I think.
Using PDF.js and its worker with a runtime script is a good way...

how to get a pdf document to automatically open when webpage is accessed?

I'm a bit new to this so bear with me. What I am trying to do is to get a pdf document to open automatically as soon as a webpage is launched. This webpage will be hosted locally and the pdf document(S) will be stored locally as well.
Essentially we are using an external platform that allows buttons to link to exterior webpages, but does not allow for opening documents. What we are trying to do is to bypass this limitation by having a webpage that is locally hosted that will automatically open up a pdf file which will be stored on the device.
If the webpage just contained the code <a href"link-to-pdf-doc"></a> will this suffice?
If you are wanting to embed the pdf in the web page rather than download it, a simple way is to use just a plain html object tag:
<object data="link-to-pdf-doc" type="application/pdf" width="100%" height="100%">
I am not sure how much support there is in browsers all across the board, but it will work for the majority of modern browsers.
There are also many libraries available which use browser detection to normalise the code and maybe have wider browser support:
https://github.com/mozilla/pdf.js
http://pdfobject.com

PDF Viewer support in mobile browser (iPhone & Android)

Does <object> tag widely supported in mobile browser?! I'm trying to embed a PDF file but it seems that it is not supported.
I'm using the following html for viewing PDF
<object data="pdf/sample.pdf#view=Fit" type="application/pdf" width="100%" height="400px">
<p>It appears you don't have Adobe Reader or PDF support in this web browser. <a rel="external" href="pdf/sample.pdf">Click here to download the PDF</a></p>
</object>
and using the PDFObject but both of them are not working in mobile browsers!
No browsers can support native rendering of PDF files without a plugin (except Google Chrome as claimed here).
But you can use Google Docs Viewer to display PDF files inside a webpage like explained here.
If embedding isn't important to you you could just link to the PDF on a seperate page.
Safari (and UIWebViews) supports the rendering of PDFs, im not a 100% sure about Android but I suspect its a similar story.
Load your url inside iframe using google docs
<iframe id="pdfviewer" src="http://docs.google.com/gview?embedded=true&url=YOUR_URL_HERE&embedded=true" frameborder="0" width="100%" height="100%"></iframe>

Issue displaying pdf on android using <object> html tag

I am trying to display a PDF to a web page using the html [object] tag. This works fine on all the web browsers on PC's as well as iPhone/iPad. But when I load the same page on an Android it asks me if I want to download the file which is the backup when the PDF isn't displayed. Does anyone know why this wouldn't work or another html control I could use rather than forcefully calling the local PDF program on the phone.
Below is how my html is rendered.
<object data="../myFile.pdf" type="application/pdf" width="100%" height="100%">
<p>Missing PDF plugin for this browser.Click here to download the PDF file.</p>
</object>
I have also seen examples on stackoverflow suggesting the below code but I am unsure of how to leverage it on my site and was hoping there was a possible html fix.
WebView webview = new WebView(this);
setContentView(webview);
webview.getSettings().setJavaScriptEnabled(true);
webview.loadUrl("URL/Demo_PDF.pdf");
The phone I am using is a Thunderbolt. Thanks for the help.
Does anyone know why this wouldn't work
Because that is not supported on Android.
or another html control I could use rather than forcefully calling the local PDF program on the phone.
There may not even be a "local PDF program on the phone". Many phones ship with one, many users install one, but there is no guarantee.
But, beyond that, there is no way to display PDFs natively inline in the stock Android browser. A third party one might support it (e.g., Firefox). Converting the PDF to a Flash animation might work with the stock Android browser, though that will only work on Android 2.2 and higher.
but I am unsure of how to leverage it on my site
You wouldn't. That is Java code, for an Android application.

Open a pdf file inside a webview.

I have an app where I've button on a webpage that is rendered inside a webview.
Now on click of button , a pdf file gets downloaded , and the same would then need to be opened inside the same webview.
attach a download listener to the web view and change the url as follows..
"https://docs.google.com/gview?embedded=true&url=https://www.example.com/xxxxxyyyyyxz.pdf"
example
https://docs.google.com/gview?embedded=true&url=https://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf
it's a link used to open pdf without downloading it...
I hope it solves your problem..
I've found that the google viewer seems to work within the android browser for viewing online PDF files. You could build a link to your pdf so that it is displayed in the viewer. I've not tried doing that within a WebView though.
UPDATE
The link is dead, there is an explanation of how to get the functionality to still work at this link.
In case this link also dies, here is the relevant section:
While the page is no longer available as it redirects to Google Docs/Drive, you can still use the Google Docs Viewer. Paste this URL in a new tab:
https://docs.google.com/viewer?url=
and then paste the address of the document you want to view online. Here's an example:
https://docs.google.com/viewer?url=http://research.google.com/archive/bigtable-osdi06.pdf
I do not think that the present android chrome based browser can support pdf. There are discussion about the same in android forums ( ex: link1 link2)
Your best bet to show pdf is to have adobe pdf reader for android installed.(or concisely put, not possible in web view)
I don't think any browser other than Chrome supports rendering PDFs without a plugin or third party tool. It's probably easier to let the user use his own app to open PDFs.
I used the IText PDF library mentioned in this thread
Android : Is there any free PDF library for Android for a sample project. You could try getting using this API to get the PDF page as an image. I am not familiar with every aspect of Itext so it might have better way to do this.

Categories

Resources