Menu
For some reason the iPad safari browser does not handle embedded PDFs well. PDFs view fine on their own when launched standalone, but not with the object tag. The problem is that they don't scroll.
I've got a jquery page with an embedded pdf which nicely scrolls on mozilla and chrome, but on safari (iPad) the PDF remains stuck on the first page and is not scrollable. The question is, how do I make this work on the iPad browser?
A similar question was posted here Making embedded PDF scrollable in iPad but the answer is not very good. They're cheating by using a height of 10000px, which creates a lot of whitespace for a small doc, and potentially won't work for a very large doc:
<!DOCTYPE html>
<html>
<head>
<title>PDF frame scrolling test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
#container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; }
object { width: 500px; height: 10000px }
</style>
</head>
<body>
<div id="container">
<object id="obj" data="my.pdf" >object can't be rendered</object>
</div>
</body>
</html>
Any way to get this done without hardcoding a crazy height?
960
I have tried for years to find a solution to this problem. I will try to save anyone looking for it some time: THERE IS NO SOLUTION TO THIS PROBLEM. The way Safari handles PDF rendering is hopelessly in conflict with the entire concept of embedding a PDF in a webpage. Moreover, all browsers on an iPad are REQUIRED to use the Safari rendering engine, so you won't even be able to instruct users to install another browser.
The only way to embed a PDF with decent results is to use a 3rd party rendering utility of some sort. There are some jQuery solutions out there, but for my purposes, I found the simplest way to do it was to embed a google doc viewer link in an object or iframe tag. This is relatively simple to do, and you can find simple instructions here:
How to view Google drive pdf link in iframe
This solution includes good display rendering and simple pagination and zoom controls. Be sure to include the &embedded=true option if you are embedding it in an iframe or object tag or it won't work. The viewer requires a publicly accessible url to your document, so if you have security concerns, like me, you will need to write a web service to serve the document up from a single use token.
There is a good webpage that lists several other options should you be looking for something a little more robust:
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
140
PDF.js can be the right choice. It works perfectly for us.
You just download it from https://mozilla.github.io/pdf.js/ and place it in your website.
Then it can be included in an iframe
<iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe>
A demo can be found here: https://mozilla.github.io/pdf.js/web/viewer.html
Regards
21
The MSD's answer is quite accurate. I have been trying to do it in many different ways, from some of the libs suggested to using object, embed element etc.
In any case it doesn't scroll for me (iPad air 2 and air 1 at least on iOS 8). Or it scrolls with overly stretched letter, or only works on short 1-2 page documents.
The solution which I found the most efficient is providing a link to iPad users via user agent to access the file directly, they will be able to see it in the tab and scroll nicely through it. It does not embed, but it is the most efficient and working solution I could find for my current needs.
I hope it helps somebody delving into the same thing
3
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
