Html 使嵌入的 PDF 在 iPad 中可滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8237708/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making embedded PDF scrollable in iPad
提问by Albin Joseph
I have a PDF embedded in HTML using the object tag. The embedded PDF is a big document and when viewed from my desktop the PDF is displayed properly with scrollbar in all the browsers including safari. However when I view the same html page in iPad the embedded PDF does not have a scrollbar. Is there any way in which we can show the scrollbar in iPad for an embedded PDF document.
我有一个使用对象标签嵌入在 HTML 中的 PDF。嵌入的 PDF 是一个大文档，当从我的桌面查看时，PDF 在包括 safari 在内的所有浏览器中都正确显示并带有滚动条。但是，当我在 iPad 中查看相同的 html 页面时，嵌入的 PDF 没有滚动条。有什么方法可以在 iPad 中为嵌入的 PDF 文档显示滚动条。
The code used for embeding the PDF is
用于嵌入 PDF 的代码是
<object data="pdf.pdf" type="application/pdf" width="1000px" height="1200px" id="pdfDoc" name="pdfDoc"></object>
I tried with iframe too and even that does not work.
我也尝试过 iframe，但即使这样也不起作用。
回答by Dave Burt
This seems to work:
这似乎有效：
- make the object tag big enough to show the whole PDF, and
- contain it in a div with limited height and overflow:auto -- add -webkit-overflow-scrolling in iOS 5+ for good, native scrolling.
- 使对象标签足够大以显示整个 PDF，以及
- 将它包含在具有有限高度和溢出的 div 中：自动 - 在 iOS 5+ 中添加 -webkit-overflow-scrolling 以获得良好的原生滚动。
Here's the code I used:
这是我使用的代码：
<!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>
回答by Ali Ok
I needed the same thing, so here I share.
我需要同样的东西，所以我在这里分享。
Issues I faced:
我遇到的问题：
- Cropped content : iframe on iOS (iPad) content cropping issue
- Scrollbars not shown : Making embedded PDF scrollable in iPad
- Cannot make full width
- 裁剪内容：iOS (iPad) 上的 iframe 内容裁剪问题
- 未显示滚动条：使嵌入的 PDF 在 iPad 中可滚动
- 不能全宽
Please try the following:
请尝试以下操作：
http://jsfiddle.net/aknMJ/2/embedded/result/
http://jsfiddle.net/aknMJ/2/embedded/result/
Used tricks:
使用技巧：
- Read the document width and scale the PDF frame according to that
- "width:100%" does not work with iframes in iPad, so I needed to use CSS3 transformations
- Wait until the PDF is completely loaded and then show&resize the PDF frame. Otherwise the content was cropped.
- 读取文档宽度并根据该宽度缩放 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 + ")");
});
回答by VanBoch
PDF.js is working perfectly in our case.
PDF.js 在我们的案例中运行良好。
You can check the full 1-line solution here: Make embedded PDF scrollable in iPad
您可以在此处查看完整的 1-line 解决方案：使嵌入的 PDF 在 iPad 中可滚动
Good luck
祝你好运
回答by Matt
On the iPad you can use two fingers to scroll embedded content - this works for divs with overflow:scroll
在 iPad 上，您可以使用两根手指滚动嵌入的内容 - 这适用于溢出的 div:scroll
