logo标签列表

在移动Safari上显示PDF文件时出现问题的解决方案

iosipadpdfiframemobile-safari
59
在我们的网页应用程序中，我们使用以下代码将PDF文档显示在一个iframe中：
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf" 
                             style="width:100%; height:500px;"></iframe>

在所有主要的桌面浏览器中，这个功能在PDF的宽度上进行缩放，以适应iFrame的限制，并提供垂直滚动条来查看文档中的所有页面。
然而，目前我无法在移动Safari中正确显示PDF。在这种情况下，只有PDF的左上部分可见，没有水平或垂直滚动条来查看文档的其余部分。
有人知道在移动Safari中解决这个问题的方法吗？
更新-2013年3月
经过数小时的搜索和实验，我可以得出结论，这个问题真是一团糟！有很多解决方案，但每个都远非完美。如果还有其他人遇到这个问题，我建议参考“解决iPad上iFrame问题的策略”。对我来说，我需要放弃这个解决方案，寻找另一个适用于我们的iPad用户的解决方案。
更新-2015年5月
关于这个问题的最新进展，我只是想快速更新一下。最近我开始使用Google Drive的浏览器，这基本上解决了最初的问题。只需提供PDF文档的完整路径，Google会返回一个HTML格式的PDF解释（别忘了设置embedded=true）。例如：

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

我在小屏幕上使用这个作为备选方案，只需将上面的链接嵌入到我的<iframe>中。
3
关于你的“更新 - 2015年5月”——Google Drive查看器解决方案对我非常有效，似乎解决了我们之前在IOS Safari和Android上遇到的问题。谢谢！ - JKM
当在iFrame中引用具有不同来源的Google Drive时，这怎么工作？当尝试嵌入Google Drive链接时，我会收到一个“'X-Frame-Options' to 'sameorigin'”错误。 - vesperae
3
我本以为这会解决我的问题，但是使用谷歌时我太多次收到“预览不可用”的提示 :/ - mdmb
1
“Strategies for the iFrame on the iPad Problem” 的链接已经过时，看起来它已经被移动到这里：https://blogs.magnolia-cms.com/christopher-zimmermann/detail~&strategies-for-the-iframe-on-the-ipad-problem~.html。 - Nookeen
哇，这个答案太棒了！它不仅解决了在移动Safari和iOS中Webview查看PDF的问题，而且还为你加了10000000分。 - Cesar Bielich
显示剩余3条评论
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>
你救了我的一天，即使在iOS 10上，iFrame仍然被渲染为img。 - garanda
另外，由于它呈现为图像并且仅显示第一页，我的初始想法是保存为图像，但是然后在相机胶卷中该图像为空白。没有什么帮助。 - cbrawl
5
<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>
1
有没有办法删除右上角的“在新窗口中打开”链接？ - al404IT
4

我对此的解决方案是在移动设备上使用Google Drive，在更大的屏幕上使用包含在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>
3

为了在2021年使用Google预览功能，我需要进行以下操作。对之前的发布方式做出了一些小的调整。

"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
2
15
虽然我来晚了，但我已经在iOS上测试PDF.js一段时间了，效果很差。性能非常糟糕，对于大型文档，它使用的内存太多了，导致浏览器崩溃。 - Stephen Collins
2
2023年了，pdf.js仍然无法正确渲染带有大型图像的简单文档 - 出现问题，文本和部分图像消失等。 - LordMsz
-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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接