在移动Safari上用iFrame显示PDF的问题
在移动Safari上用iFrame显示PDF的问题
提问于 2013-03-18 15:38:30
在我们的web应用程序中，我们使用以下代码在iframe中显示一个PDF文档：
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>这在所有主要的桌面浏览器中都能很好地工作，它具有PDF缩放的宽度以适应iFrame的限制，并有一个垂直滚动条来查看文档中的所有页面。
然而，目前我无法在Mobile中正确地显示PDF。在这种情况下，只有PDF的左上角部分是可见的，没有任何水平或垂直滚动条来查看文档的其余部分。
有人知道我在Mobile中解决了这个问题吗？
更新-2013年3月
经过几个小时的搜索和实验，我可以得出结论，这个问题真是一团糟！！有许多解决方案，但每个解决方案都远远不够完美。我建议其他人在这个问题上苦苦挣扎，最好叫“关于iFrame问题的iPad策略”。对我来说，我需要把这个写下来，为我们的iPad用户寻找另一个解决方案。
更新-2015年5月
只是关于这个问题的一个快速更新。最近，我开始使用Google查看器，它基本上解决了原来的问题。只要提供一个完整的路径到PDF文档，谷歌将返回一个HTML格式的解释你的PDF (别忘了设置embedded=true)。例如：
我将此作为较小视图的后盾，并简单地将上述链接嵌入到我的<iframe>中。
回答 6
Stack Overflow用户
发布于 2015-03-13 17:58:55
我找到了一个新的解决方案。从iOS 8开始，mobile将PDF呈现为框架内的中的图像。然后，您可以在PDF加载之后调整宽度：
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>Stack Overflow用户
发布于 2018-12-03 23:35:59
我的解决方案是在手机上使用谷歌驱动器，并在更大的屏幕上嵌入标准的pdf。
.desktop-pdf {
display: none;
}
.mobile-pdf {
display: block;
}
@media only screen and (min-width : 1025px) {
.mobile-pdf {
display: none;
}
.desktop-pdf {
display: block;
}
}
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> <a href="URL HERE" target="_blank"> Please click here to attempt to view the information in a separate browser window. </a> Thanks for your patience!</p>
</iframe>
</div>
</div>Stack Overflow用户
发布于 2021-01-25 16:03:34
<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
height="600"
></iframe>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15480804
复制相关文章
相似问题
腾讯云开发者
