Make embedded PDF scrollable in iPad

jquery html ipad pdf

40,995

Solution 1

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/

Solution 2

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

Solution 3

Hopefully this can help others in the future. I used google's pdf viewer to be able to scroll a pdf in an iframe. So on the src tag the url is

https://docs.google.com/gview?url=’ + ‘insert link to PDF’ + embedded=true

Solution 4

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

Solution 5

You don't need to set the height of the object to something crazy, just set it so the same height as your container element. To scroll using the hopeless Safari rendering object you need to use two fingers (both up/down and left/right).

I also have this properties set up in my container element:

overflow: scroll;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;

Something I couldn't achieve was to get it fill the width on the container, but at least you can navigate through the document.

View more solutions

40,995

chrisnova10

Updated on July 09, 2022

Comments

chrisnova10 almost 2 years
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?
- Jitendra Vyas about 11 years
  
  Is the PDF embedded in the app or is it viewed from a server? i.e is there a reason you need to present the PDF in a UIWebView or Mobile Safari?
- chrisnova10 about 11 years
  
  The PDF is on the server. Ultimately the PDFs will be updated dynamically on the server, and the app will display them no matter what shape or size they are. The rest of the app is done in jquery, and the ipad is our user's preference. Right now I'm launching the PDFs into a new browser window, because it works, but ideally I'd like to embed them into the page so that they don't have to leave.
- Jitendra Vyas about 11 years
  
  There is no native app?
- chrisnova10 about 11 years
  
  no, just a website--html 5 + jquery
- IfOnly over 8 years
  
  I am facing the same issue and I dont want to use PDF.js as it is too complicated. I just want to show PDF using object tag in iPad also as it works for all other browsers. Any comments?
cjohansson about 7 years

We ended up using this method, it worked fine and was easy to implement.
Jouni K. Seppänen over 6 years

The jqueryrain link redirected to a scammy-looking "you have won a free iPhone" page for me. I wonder if the page contents are available elsewhere?
MSD over 6 years

I see that. I guess I should have put an expiration date on my post. (Warning: links not guaranteed to be operational four years after posting...) or something like that. 8^P
Jouni K. Seppänen over 6 years

I think that's why people keep commenting that we shouldn't just post links but summarize their content.
Akash over 6 years

Is this even an answer now? After that the link has expired and no replacement has been done? Disgusting.
ajmccall almost 5 years

Hi @andres. You may want to add some description explaining how/why your code solves the poster's original question.
Doctore almost 4 years

Thanks, this is best answer. Although I have some issue with first load. So I am loading it twice into document.
Anoop LL about 3 years

@Doctore I tied this but getting no preview available and sometimes 400 error