IE8 嵌入式 PDF iframe

Question

IE8 嵌入式 PDF iframe

95

我已经使用了

标签来嵌入一个 PDF 文件。

<iframe id="iframepdf" src="files/example.pdf"></iframe>

这在Chrome、IE8+、Firefox等浏览器中都可以正常工作，但是出现了一些人在IE8中查看时，文件会下载而不是嵌入。我知道这个浏览器已经过时了，但它是我们办公室的标准浏览器，因此网站必须为其设计。

有没有人有任何想法，为什么会发生这种情况，我该如何修复它或者放置一个错误消息来代替让文件下载？

- user2931470

可能还要看一下这个教程或者问题。 - Flimtix

6个回答

52

如果浏览器已安装PDF插件，则执行该对象；否则，它将使用Google的PDF查看器将其显示为纯HTML：

<object data="your_url_to_pdf" type="application/pdf">
    <iframe src="https://docs.google.com/viewer?url=your_url_to_pdf&embedded=true"></iframe>
</object>

- mgutt

2

这个应该能很好地工作，但是使用文档时我得到了大量的“无法预览”的信息。 - mdmb

@Ancinek，你替换了mgutt中的两个your_url_to_pdf了吗（一个在对象数据中，另一个在google.com/viewer?中）？ - MagTun

1

我使用了上面的代码，在iPad设备中没有显示滚动条。.scroll-container { max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch; } - user264675

看起来 Google Viewer 会破坏文档内部的任何书签。 - Bangkokian

20

试试这个。

<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" height="100%" width="100%">
</iframe>

- Bilal A.Awan

运行良好，您可以右键单击它并选择打印。 - Chad Cache

运行得非常好。最初错过了这一部分：&embedded=true。 - Jay Gray

19

嵌入框架

<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" height="1100" width="850" ></iframe>

对象

<object data="your_url_to_pdf" type="application/pdf">
  <embed src="your_url_to_pdf" type="application/pdf" />
</object>

- Muddasir Abbas

3

如何触发对象的打印，Print未定义？ - Miguel

2

这里提供的iFrame解决方案正是我需要的，可以显示由MS MVC后端服务生成并作为视图返回的PDF。我尝试了所有其他解决方案，但出于某种原因，它们都无法正常工作。 - Terry H

这是我能够找到的唯一解决方案，可以避免Firefox提示下载文档。非常感谢您！ - FloppyNotFound

1

该对象仍将以图像形式显示PDF。如果您的PDF有多个页面，则只会看到第一页。 - Enrico

-1

在我的情况下，我直接设置了链接，它运行良好。

<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
    <h1>Online HTML Editor</h1>
    <div>This is real time online HTML Editor</div>
    <iframe id="if1" width="100%" height="900" style="visibility:visible" src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</body>
</html>

注意：上述代码在HTML文件中可以正常工作，但在此代码片段中无法正常工作。

- Ganesan J

哦，对不起先生。我没有正确看到问题。我只回答了如何在Chrome和其他浏览器中显示PDF的问题。 - Ganesan J

-3

使用Adobe嵌入式PDF API。这是我最终使用的解决方案，完美地实现了功能。

- Ayo D Adesanya

我发现有时候渲染页面非常缓慢，每个PDF元素的渲染通常需要30秒至60秒，并且在此期间，元素会出现失真和不完整的情况，直到完成。这是针对大约10页、大小约为3MB的PDF文件而言的。这种情况是否是典型的呢？ - pythonjsgeo

我在我的个人网站上使用它，它能够正常工作。但是我承认，有更好的解决方案。 - Ayo D Adesanya

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Adriano Repetti · Accepted Answer

很可能是因为没有安装Adobe Reader插件而被下载。在这种情况下，IE（无论哪个版本）不知道如何呈现文件，它只会简单地下载文件（例如，Chrome内置了自己的PDF渲染器）。

如果你想要尝试检测PDF支持，你可以：

!!navigator.mimeTypes["application/pdf"]?.enabledPlugin （现在已经过时，在一些浏览器中可能仍然受支持）。
navigator.pdfViewerEnabled（最新标准，可能会改变，并且目前并不被广泛支持）。

2021年：现在原来的答案肯定已经过时了。除非你需要支持相对较旧的浏览器，否则应该只需使用<object>（可能带有回退方案）即可。

话虽如此，<iframe>不是显示PDF的最佳方式（不要忘记与移动浏览器的兼容性，例如Safari）。一些浏览器将始终在外部应用程序中打开该文件（或在另一个浏览器窗口中打开）。我发现最好和最兼容的方法有点棘手，但在我尝试过的所有浏览器上都有效（即使是非常过时的浏览器）：

保留你的<iframe>，但不要在其中显示PDF，它将填充一个由<object>标记组成的HTML页面。为你的PDF创建一个HTML包装页面，它应该长这样：

<html>
<body>
    <object data="your_url_to_pdf" type="application/pdf">
        <div>No online PDF viewer installed</div>
    </object>
</body>
</html>

当然，您仍然需要在浏览器中安装适当的插件。此外，如果需要支持移动设备上的 Safari，请查看此帖子。

为什么要使用HTML页面？这样您可以提供备用方案，以防PDF查看器不被支持。内部查看器、纯HTML错误消息/选项等等...

检查PDF支持情况很棘手，因此您可能需要为客户提供替代查看器，可以查看PDF.JS项目；它很好，但在桌面浏览器上渲染质量不如本机PDF渲染器（我认为由于屏幕尺寸，移动浏览器没有任何区别）。