在iPad上使嵌入式PDF可滚动

15

我在HTML中使用object标签嵌入了一个PDF文件。这个PDF文件很大,当我在桌面上查看时,所有浏览器都包括safari都可以正常显示带有滚动条的PDF文件。然而,当我在iPad上查看同样的HTML页面时,嵌入的PDF没有滚动条。是否有办法在iPad上显示嵌入的PDF文档的滚动条?

嵌入PDF文件的代码如下:

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

我也尝试使用 iframe,但它也无法正常工作。


在iOS中,滚动条并不突出,它们只是指示您已经滚动了多远的内容片段,并不表示可以滚动。 - Chris Wagner
@Albin:iPad 单指滚动工作了吗?用两个手指滚动对我来说可以运行......请在此处找到链接https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working - Krishna9960
4个回答

12
这似乎可行:
  • 将对象标签调整足够大以显示整个PDF文件,并
  • 将其包含在高度有限且带有overflow:auto的div中 - 在iOS 5+中添加-webkit-overflow-scrolling以获得良好的本地滚动。
这是我使用的代码:
<!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>

15
我尝试了这种方法。但在iPad上,我只能看到第一页的图像。我无法滚动。 - IfOnly
@如果可以的话:你有得到任何解决方案吗?如果你已经修复了问题,请分享一下。我也在面临同样的问题 :( - Nithin CV
很遗憾,不是直接提供。相反,我提供了一个PDF链接,并在单独的视图中打开了该PDF。 - IfOnly

2

我也遇到了同样的问题,所以在这里分享一下。

我遇到的问题:

请尝试以下方法:

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

使用的技巧:

  1. 读取文档宽度并根据其缩放PDF帧
  2. iPad中的iframes不支持"width:100%",因此我需要使用CSS3转换
  3. 等待PDF完全加载后再显示和调整PDF帧。否则内容会被裁剪。
$('#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 + ")");
});

我感觉自己花了几周时间来解决这个问题,现在已经筋疲力尽了,但是我找到了一个解决方案:$('#pdf_iframe').css("-webkit-transform", "scale(" + 1.63 + ")"); $('#pdf_iframe').css("zoom", "0.63");在 PDF 动态加载后,这两个属性的组合成功地将 PDF 文档的宽度适当地适配到 iPad 上。如果有人想要解释,请随时通知我。 - Vladimir Trifonov
关于滚动问题,遗憾的是,工作解决方案是使 iframe 的高度固定,并且这个高度必须等于 PDF 的大小。 - Vladimir Trifonov
关于我的第一条评论 - 你必须尝试不同的值来使其适合。我认为示例中的值仅适用于我的情况。 - Vladimir Trifonov
另一种方法是使用pdf.js,但这有点棘手,并且很难在工作项目中实现。 - Vladimir Trifonov
嗨@VladimirTrifonov,感谢您的评论。我遇到了与您提到的类似的问题。我想在iOS-8.4、Android4.4+ cordova应用程序以及其Web应用程序版本中嵌入PDF。我尝试使用Iframe,pdf正确加载,但我遇到了滚动问题。您对此有任何评论吗? - Nithin CV

0

2
PDF.js在iOS上会导致巨大的内存泄漏,不建议使用它。 - Cenobyte321
你有其他的选择吗?那是目前我们唯一可行的解决方案。 - VanBoch
在iOS中,<object>标签使用的内存要少得多,尽管使其正常工作(滚动和调整大小)需要更多的时间和精力。 - Cenobyte321

0
在iPad上,您可以使用两个手指滚动嵌入式内容 - 这适用于overflow:scroll的div。

1
但是滚动条仍然不可见。我们有没有办法让iPad上的滚动条可见? - Albin Joseph
@Matt,iPad上单指滚动有什么想法吗?双指可以工作。参考我的问题:https://stackoverflow.com/questions/43186427/scrolling-with-single-finger-gesture-for-object-element-ipad-not-working - Krishna9960

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接