Make embedded PDF scrollable in iPad

Question

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 t

Answer 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/

Answer 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

Answer 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

Answer 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

Answer 5

Hello I dealt with same problem. Across all browsers I had no problem to embed PDF except the safari browser.

I found solution on this webpage and works for me - https://www.labnol.org/embed-pdf-200208

<iframe frameborder="0" scrolling="no"
 width="640" height="480"
 src="https://drive.google.com/file/d/<<FILE_ID>>/preview">

Answer 6

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.