我使用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,即使这样也行不通。
这似乎有效:
- 使对象标签足够大以显示整个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>
我需要同样的东西,所以我在这里分享。
我面临的问题:
请尝试以下方法:
http://jsfiddle.net/aknMJ/2/embedded/result/
使用过的技巧:
- 读取文档宽度并根据该缩放PDF框架
- “宽度: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 + ")");
});
在iPad上你可以用两根手指滚动嵌入的内容 - 这适用于带溢出的div:scroll
PDF.js在我们的案例中完美运作。
您可以在此处查看完整的1行解决方案: 使嵌入式PDF可在iPad中滚动
祝你好运