50

在我们的 Web 应用程序中，我们iframe使用以下代码行显示 PDF 文档：

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

这在所有主要的桌面浏览器中都可以正常工作，PDF 的宽度可以缩放以适应 iFrame 的范围，垂直滚动条可以查看文档中的所有页面。

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

有人知道我在 Mobile Safari 中解决此问题的方法吗？

更新 - 2013 年 3 月

经过数小时的搜索和实验，我可以得出结论，这个问题真是一团糟！有很多解决方案，但每一个都远非完美。我建议任何其他为此苦苦挣扎的人参考“ iPad 问题上的 iFrame 策略”。对我来说，我需要写下这个并为我们的 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>.

4

6 回答 6

11

我找到了一个新的解决方案。从 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>
于 2015-03-13T17:58:55.360 回答
3

trypdf.js也应该在移动 safari 中工作：https ://github.com/mozilla/pdf.js/

于 2013-09-09T18:28:02.007 回答
2

我的解决方案是在移动设备上使用谷歌驱动器，并在大屏幕的 iframe 中嵌入标准 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>
于 2018-12-03T23:35:59.560 回答
1 
<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>
于 2021-01-25T16:03:34.683 回答
1

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

"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
于 2021-05-04T13:59:18.213 回答
-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>
于 2014-04-18T15:45:09.083 回答