问题 使嵌入式PDF可在iPad中滚动


我使用object标签在HTML中嵌入了PDF。嵌入式PDF是一个大文档,从我的桌面查看时,PDF在所有浏览器(包括safari)中都使用滚动条正确显示。但是,当我在iPad中查看相同的html页面时,嵌入的PDF没有滚动条。有没有什么方法可以在iPad上显示嵌入式PDF文档的滚动条。

用于嵌入PDF的代码是

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

我也尝试使用iframe,即使这样也行不通。


4622
2017-11-23 05:27


起源

滚动条在iOS中并不突出,它们仅仅是您滚动内容片段的指标,而不是表示滚动是可能的。 - Chris Wagner
@Albin:用单指滚动在ipad上工作了吗?用两根手指滚动它为我工作...请在这里找到链接 stackoverflow.com/questions/43186427/... - Krishna9960


答案:


这似乎有效:

  • 使对象标签足够大以显示整个PDF,和
  • 包含在高度有限和溢出的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>

12
2017-12-06 05:48



我试过这种方法。但在iPad中我只能看到第一页图像。我无法滚动 - IfOnly
@IfOnly:你有没有得到任何解决方案?如果您已解决问题,请分享。我面临同样的:( - Nithin CV
很不幸的是,不行。相反,我提供了PDF的链接,并在单独的视图中打开PDF。 - IfOnly


我需要同样的东西,所以我在这里分享。

我面临的问题:

请尝试以下方法:

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

使用过的技巧:

  1. 读取文档宽度并根据该缩放PDF框架
  2. “宽度:100%”不适用于iPad中的iframe,因此我需要使用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 + ")");
});

2
2017-09-09 13:30



我觉得我花了好几个星期处理这个问题,现在我已经筋疲力尽了,但我找到了自己的解决方案:$('#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应用程序中的PDF。我已经尝试使用iframe,正确加载了pdf,但我面临滚动问题。你有什么评论吗? - Nithin CV


在iPad上你可以用两根手指滚动嵌入的内容 - 这适用于带溢出的div:scroll


0
2017-11-25 17:26



但滚动条仍然是看不见的。有什么办法可以让我在ipad中看到滚动条吗? - Albin Joseph
@Matt任何一个手指在ipad中滚动的想法。有两个工作。这里是我的问题 stackoverflow.com/questions/43186427/... - Krishna9960


PDF.js在我们的案例中完美运作。

您可以在此处查看完整的1行解决方案: 使嵌入式PDF可在iPad中滚动

祝你好运


0
2017-09-16 09:05



PDF.js会在iOS上造成巨大的内存泄漏,根本不建议使用它。 - Cenobyte321
你还有其他选择吗?这是迄今为止我们唯一的解决方案。 - VanBoch
在iOS中,<object>标签使用的内存要少得多,尽管它需要更多的时间和精力才能使其正常工作(滚动和调整大小)。 - Cenobyte321