HTML嵌入式PDF iframe

时间:2013-10-29 09:42:05

标签: html pdf iframe internet-explorer-8

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

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

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

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

6 个答案:

答案 0 :(得分:64)

它已下载可能,因为没有安装Adobe Reader插件。在这种情况下,IE(无论哪个版本)都不知道如何呈现它,它只是下载文件(例如,Chrome有自己的嵌入式PDF渲染器)。

那就是说。 <iframe>不是显示PDF的最佳方式(不要忘记与移动浏览器的兼容性,例如Safari)。某些浏览器将始终在外部应用程序(或其他浏览器窗口)中打开该文件。我找到的最好和最兼容的方式有点棘手但适用于我尝试过的所有浏览器(甚至已经过时了):

保持您的&lt; iframe>但不在其中显示PDF,它将填充一个由<object>标记组成的HTML页面。为您的PDF创建一个HTML包装页面,它应该看起来像这样:

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

当然,您仍需要在浏览器中安装相应的插件。如果您需要在移动设备上支持Safari,请查看this post

第一。为什么在<embed>内嵌套<object>?你会找到答案here on SO。您可以(应该!)为您的用户(或内置查看器,请参阅下一段)提供自定义消息,而不是嵌套的<embed>标记。现在<object>可以毫无后顾之忧地使用<embed>无用。

第二。为什么是HTML页面?因此,如果不支持PDF查看器,则可以提供后备。内部查看器,纯HTML错误消息/选项等等......

检查PDF支持是非常棘手的,因此您可以为您的客户提供备用查看器,看看PDF.JS项目,它非常好但是渲染质量 - 对于桌面浏览器 - 不如< em> native PDF渲染器(我认为由于屏幕尺寸,我认为移动浏览器没有任何区别)。

答案 1 :(得分:25)

如果浏览器安装了pdf插件,则会执行该对象,否则会使用Google的PDF Viewer将其显示为纯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>

答案 2 :(得分:9)

<强> I帧

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

答案 3 :(得分:1)

尝试一下。

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

答案 4 :(得分:0)

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

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

  1. 创建您的项目
  2. 获取您的客户 ID
  3. 添加您的域(它仅适用于该域)

答案 5 :(得分:0)

使用 Adob​​e Embed PDF API。这是我最终使用的解决方案,完美运行。