Question

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

Answer 1

这似乎有效：

使对象标记足够大以显示整个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>

Answer 2

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

我遇到的问题：

裁剪内容：iframe on iOS (iPad) content cropping issue
滚动条未显示：Making embedded PDF scrollable in iPad
无法制作全宽

请尝试以下方法：

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

使用过的技巧：

根据
＆＃34;宽度：100％＆＃34;不适用于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 + ")");
});

Answer 3

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

Answer 4

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

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

祝你好运

使嵌入式PDF可在iPad中滚动

4 个答案: