首页 文章

使嵌入式PDF可在iPad中滚动

提问于
浏览 次
12

我使用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，即使这样也行不通 .

html ipad pdf

4 回答

  • 12

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

    您可以在此处查看完整的1行解决方案：Make embedded PDF scrollable in iPad

    祝好运

    回复于
  • 2

    这似乎有效：

    • 使对象标签足够大以显示整个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>
    回复于
  • 0

    我需要同样的东西，所以我在这里分享 .

    我面临的问题：

    请尝试以下方法：

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

    使用过的技巧：

    • 读取文档宽度并根据该缩放PDF框架

    • "width:100%"不适用于iPad中的iframe，所以我需要使用CSS3转换

    • 等待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 + ")");
});
    回复于
  • 0

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

    回复于

相关问题