80

我已使用该标签嵌入 pdf 文件。

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

这在 Chrome、IE8+、Firefox 等中运行良好，但由于某种原因，当有些人在 IE8 中查看它时，文件正在下载而不是嵌入。我知道这个浏览器已经过时，但它是我办公室的标准浏览器，因此，必须为此设计网站。

有没有人对为什么会发生这种情况有任何想法，我该如何解决它或者发出错误消息而不是让文件下载？

4

6 回答 6

105

下载可能是因为没有安装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 渲染器好（我想，由于屏幕大小，我没有看到移动浏览器有任何差异）。

于 2013-10-29T09:56:33.583 回答
47

如果浏览器安装了 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>
于 2017-03-20T16:22:42.803 回答
18

试试这个。

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

于 2019-10-10T11:45:05.827 回答
16

框架

<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>
于 2016-02-12T12:18:26.793 回答
0

使用 Adob​​e 嵌入 PDF API。这是我最终使用的解决方案，效果很好。

于 2021-08-04T10:12:25.303 回答
0

花了很多时间我终于找到了解决方案！

最好的选择是使用 Adob​​e 提供的免费服务，PDF embed API。 https://www.adobe.io/apis/documentcloud/dcsdk/

  1. 创建您的项目
  2. 获取您的客户 ID
  3. 添加您的域（它只适用于该域）
于 2021-03-09T14:13:44.933 回答