24

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?

Community
  • 1
  • 1
chrisnova10
  • 341
  • 1
  • 2
  • 4
  • 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? – epatel Apr 06 '13 at 18:38
  • 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. – chrisnova10 Apr 06 '13 at 18:59
  • There is no native app? – epatel Apr 06 '13 at 19:06
  • no, just a website--html 5 + jquery – chrisnova10 Apr 06 '13 at 19:18
  • 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? – IfOnly Jan 11 '16 at 10:20

8 Answers8

28

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/

its_notjack
  • 323
  • 3
  • 17
MSD
  • 312
  • 5
  • 14
  • 1
    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? – Jouni K. Seppänen Sep 17 '17 at 18:35
  • 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 – MSD Sep 18 '17 at 20:30
  • 2
    I think that's why people keep commenting that we shouldn't just post links but summarize their content. – Jouni K. Seppänen Sep 21 '17 at 13:15
  • Is this even an answer now? After that the link has expired and no replacement has been done? Disgusting. – Akash Oct 22 '17 at 16:45
22

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

VanBoch
  • 287
  • 2
  • 8
4

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

David Chando
  • 41
  • 1
3

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

Matjaz Trcek
  • 261
  • 3
  • 15
1

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.

Alex Miralles
  • 11
  • 2
0

Another solution (without coding) is to use Google if you only want to use embeddings selectively.

  1. Store your pdf in your Google Drive
  2. Open it with preview.
  3. Select "Open in new window" from the submenu of the three items.
  4. In the new window select "Embed item" in the submenu of the three items.
  5. Copy the iframe code and paste it into your page.

Here you can also find detailed instructions and under point 12 you can see the iframe code.

example but in german

coreehi
  • 177
  • 1
  • 6
0
static downloadPdfChromeApp(linkSource: string) {
        // Crea un div y dentro un object para luego destruirlo y abrir una nueva ventana enviando la data
        const divpdf = document.createElement('div');
        divpdf.innerHTML = '<div style="display:none;position:absolute">' +
            '<object  style="display:none;" id="docuFrame" type="application/pdf" width="1px" height="1px" data="' +
            linkSource + '"></object></div>';
        document.firstElementChild.appendChild(divpdf);
        const frame = document.getElementById('docuFrame') as HTMLObjectElement;
        window.open(frame.data);
        divpdf.remove();
    }
ajmccall
  • 2,024
  • 23
  • 42
andres
  • 1
  • 1
    Hi @andres. You may want to add some description explaining how/why your code solves the poster's original question. – ajmccall Jul 29 '19 at 11:36
0

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">
Dharman
  • 30,962
  • 25
  • 85
  • 135
Gebo
  • 1