在Mobile Safari上的iFrame中显示PDF的问题

时间:2013-03-18 15:38:31

标签: ios ipad pdf iframe mobile-safari

在我们的网络应用程序中,我们使用以下代码行在iframe中显示PDF文档:

<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
                             style="width:100%; height:500px;"></iframe>

这适用于所有主要的桌面浏览器,PDF缩放的宽度适合iFrame的范围,垂直滚动条可以查看文档中的所有页面。

目前我无法在Mobile Safari中正确显示PDF。在这种情况下,只有PDF的左上部分是可见的,没有任何水平或垂直滚动​​条来查看文档的其余部分。

有没有人知道我在Mobile Safari中解决此问题?

更新 - 2013年3月

经过几个小时的搜索和实验,我可以得出结论,这个问题真的很乱!有很多解决方案,但每个解决方案都远非完美。任何其他人都在努力解决这个问题我建议引用“Strategies for the iFrame on the iPad Problem”。对我来说,我需要写下这个,并为我们的iPad用户寻找另一种解决方案。

更新 - 2015年5月

只是对这个问题的快速更新。最近我开始使用Google Drive查看器,它主要解决了原始问题。只需提供PDF文档的完整路径,Google将返回PDF格式的HTML格式解释(不要忘记设置embedded=true)。例如

https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf

我将其用作较小视口的后备,只需将上述链接嵌入我的<iframe>

6 个答案:

答案 0 :(得分:10)

我找到了一个新的解决方案。从iOS 8开始,移动版Safari将PDF渲染为框架内HTML文档中的图像。然后,您可以在加载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>

答案 1 :(得分:2)

尝试pdf.js也应该适用于移动版Safari:https://github.com/mozilla/pdf.js/

答案 2 :(得分:0)

为此,我的解决方案是在移动设备上使用Google驱动器,并在大屏幕上的iframe中嵌入标准pdf。

*Item is considered paid if unsealed.
*No replacement or compensation will be
given for any expired coupons.

答案 3 :(得分:0)

<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>

答案 4 :(得分:0)

为了在 2021 年使用 google 预览版,我必须执行以下操作。对上面发布的方式进行了一些小的调整。

"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)

答案 5 :(得分:-1)

我遇到了同样的问题。我发现通过将焦点设置在输入上(不使用div标签),将显示pdf。

我通过添加隐藏输入并将焦点设置在上面来修复它。这项工作并没有减慢应用程序的速度。

<html><head>
<script>
    $(document).ready(function () {
        $("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
    });
</script></head>
<body>
<div class="main">
    <div class="level1">Learning</div>
    <input type="hidden" class="inputforfocus">
    <div>
        <iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
    </div>
</div>
</body>
</html>