Making embedded PDF scrollable in iPad

后端未结

关注

 4  1004

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 th

相关标签:

4条回答

挽巷

2020-12-08 17:39

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
無奈伤痛

2020-12-08 17:42

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

小蘑菇

2020-12-08 17:44

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>

0 讨论(0)

陌清茗

2020-12-08 17:44
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:
1. Read the document width and scale the PDF frame according to that
2. "width:100%" does not work with iframes in iPad, so I needed to use CSS3 transformations
3. 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 + ")");
});
```
0 讨论(0)
发布评论:

提交评论
- 加载中...