Making embedded PDF scrollable in iPad

Question

I have a PDF embedded in HTML using the object tag. The embedded PDF is a big document and when viewed from my desktop the PDF is displayed properly with scrollbar in all the browsers including safari. However when I view the same html page in iPad the embedded PDF does not have a scrollbar. Is there any way in which we can show the scrollbar in iPad for an embedded PDF document.

The code used for embeding the PDF is

<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>

I tried with iframe too and even that does not work.

Scrollbars are not prominent in iOS, they are merely an indicator of how far you have scrolled through a content piece, not to signify that scrolling is possible. — Chris Wagner, Nov 23 '11 at 06:18
@Albin : Did it worked in ipad with single finger scroll. With two finger scroll its working for me...Please find the link here https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working — Krishna9960, Apr 09 '17 at 07:11

score 12 · Answer 1 · answered Dec 06 '12 at 05:48

12

This seems to work:

make the object tag big enough to show the whole PDF, and
contain it in a div with limited height and overflow:auto -- add -webkit-overflow-scrolling in iOS 5+ for good, native scrolling.

Here's the code I used:

<!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>

answered Dec 06 '12 at 05:48

Dave Burt

1,838
19
20

15

I tried this approach. But in iPad I can see only first page image. I am not able to scroll – IfOnly Jan 11 '16 at 10:10
@IfOnly: did u get any solution? Please share if u have fixed the issue. I am facing the same :( – Nithin CV Apr 26 '16 at 20:59
unfortunately no. Instead I provided a link to PDF and opened the PDF in separate view. – IfOnly May 19 '16 at 10:41

score 2 · Answer 2 · edited May 23 '17 at 10:30

2

I needed the same thing, so here I share.

Issues I faced:

Cropped content : iframe on iOS (iPad) content cropping issue
Scrollbars not shown : Making embedded PDF scrollable in iPad
Cannot make full width

Please try the following:

http://jsfiddle.net/aknMJ/2/embedded/result/

Used tricks:

Read the document width and scale the PDF frame according to that
"width:100%" does not work with iframes in iPad, so I needed to use CSS3 transformations
Wait until the PDF is completely loaded and then show&resize the PDF frame. Otherwise the content was cropped.

$('#pdfFrame').hide();
var pdfFrame = document.getElementById('pdfFrame');
pdfFrame.contentWindow.location.replace(PDF_URL);
$('#pdfFrame').on('load', function () {
    $('#pdfFrame').show();
    var documentWidth = $(document).width()
    var scale = (documentWidth / width) * 0.95;
    $('#pdfFrame').css("-webkit-transform", "scale(" + scale + ")");
});

edited May 23 '17 at 10:30

Community

1
1

answered Sep 09 '13 at 13:30

Ali Ok

716
1
8
23

i feel like i spent weeks with this issue and now i'm am so exhausted, but i find a solution for myself: $('#pdf_iframe').css("-webkit-transform", "scale(" + 1.63 + ")"); $('#pdf_iframe').css("zoom", "0.63"); The combination of these two properties after the pdf is loaded dynamically succeed to fit the pdf documents width into ipad properly. if someone wants explanations, feel free to notify me. – Vladimir Trifonov Jun 06 '14 at 17:08
about the scroll issue, sadly but the working solution is to make iframe's height fixed and this height has to be equal of the pdf's size. – Vladimir Trifonov Jun 06 '14 at 17:15
about my first comment - you have to experimenting with the values to make it fit. the values in the example work only for my case, i think. – Vladimir Trifonov Jun 06 '14 at 17:18
another approach is to use pdf.js but it's kind of tricky and it's hard to be implemented in a working project. – Vladimir Trifonov Jun 06 '14 at 17:19
Hi @VladimirTrifonov , Thanks for ur comment. I am facing similar issue like u mentioned. I want to embedd PDF in iOS-8.4, Android4.4+ cordova apps also in its web app version. I have tried using Iframe , pdf loaded correctly but Iam facing scroll issue. Do u have any comments on It? – Nithin CV Apr 26 '16 at 20:58

score 0 · Answer 3 · edited May 23 '17 at 12:10

0

PDF.js is working perfectly in our case.

You can check the full 1-line solution here: Make embedded PDF scrollable in iPad

Good luck

edited May 23 '17 at 12:10

Community

1
1

answered Sep 16 '15 at 09:05

VanBoch

287
2
8

2

PDF.js casues huge memory leaks on iOS, wouldn't recommend using it at all. – Cenobyte321 Mar 30 '16 at 18:41
Do you have an alternative? That's the only working solution we have so far. – VanBoch Mar 31 '16 at 07:48
In iOS the – Cenobyte321 Apr 04 '16 at 16:52

score 0 · Answer 4 · answered Nov 25 '11 at 17:26

0

On the iPad you can use two fingers to scroll embedded content - this works for divs with overflow:scroll

answered Nov 25 '11 at 17:26

Matt

1

1

But still the scrollbars are invisible. Is there any way we can make the scrollbars visible in ipad? – Albin Joseph Nov 30 '11 at 14:38
@Matt Any idea for one finger scroll in ipad. With two its working. For reference here is my question https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working – Krishna9960 Apr 09 '17 at 07:08

Making embedded PDF scrollable in iPad

4 Answers4

Linked