如何在 <iframe> 中打开 PDF 文件？答案

【问题标题】：How to open a PDF file in an <iframe>?如何在 <iframe> 中打开 PDF 文件？
【发布时间】：2012-10-10 01:26:34
【问题描述】：

我想在 iframe 中打开 pdf 文件。我正在使用以下代码：

<a class="iframeLink" href="https://something.com/HTC_One_XL_User_Guide.pdf"> User guide </a>

在 Firefox 中可以正常打开，但在 IE8 中无法打开。

有人知道如何让它也适用于 IE 吗？

【问题讨论】：

1) class 属性值应该用引号引起来。 2) jQuery-ish 属性到底是什么？ 3) 你以什么方式表明这应该在iframe 中？

标签： javascript html pdf iframe browser

【解决方案1】：

使用iframe“渲染”PDF 不适用于所有浏览器；这取决于浏览器如何处理 PDF 文件。某些浏览器（例如 Firefox 和 Chrome）具有内置的 PDF 渲染功能，允许它们内联显示 PDF，而某些旧版浏览器（也许旧版本的 IE 尝试下载文件）。

相反，我建议查看PDFObject，这是一个用于将 PDF 嵌入 HTML 文件的 Javascript 库。它很好地处理了浏览器兼容性，并且很可能适用于 IE8。

在您的 HTML 中，您可以设置 div 来显示 PDF：

<div id="pdfRenderer"></div>

然后，您可以使用 Javascript 代码在 div 中嵌入 PDF：

var pdf = new PDFObject({
  url: "https://something.com/HTC_One_XL_User_Guide.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");

【讨论】：

这就是重点。但它将 PDF 加载到对象而不是 iframe 中。见pdfobject.com/markup/index.php
如果您不希望 pdf 文件的 src 路径暴露在 objects 数据标签中怎么办？
那么 src 路径不会显示在 iFrame 中吗？ ^
这个也可以加载图片文件吗..？

【解决方案2】：

这是从<iframe> 链接可访问 HTTP(S) 的 PDF 的代码：

<iframe src="https://research.google.com/pubs/archive/44678.pdf"
   width="800" height="600">

小提琴：http://jsfiddle.net/cEuZ3/1545/

编辑：您可以使用 JavaScript，从 <a> 标记（onclick 事件）在运行时设置 iFrame 的 SRC 属性...

编辑 2：显然，这是一个错误（但有解决方法）：

PDF files do not open in Internet Explorer with Adobe Reader 10.0 - users get an empty gray screen. How can I fix this for my users?

【讨论】：

实际上我已经从 IE 调试器中复制了这就是 jquery 和其他东西即将到来的原因......否则该类也在代码中。它适用于 mozilla ..
我已经尝试过您的链接，但如果您尝试运行，它将在 acrobat 阅读器中打开 PDF，而不是在 IE 的 iframe 中打开。但是，如果您将在 chrome 或 mozilla 中尝试相同的操作，那么它可以按预期工作。但我也想在 iframe 中为 IE 打开它
在桌面浏览器中运行良好，但在移动浏览器中无法正常运行...您能帮我使其正常运行吗？
定义“不能正常工作”。是不是太大了？只需使用vh 和vw 而不是pixels，阅读更多：stackoverflow.com/a/30512369/1654265

【解决方案3】：

确保 Web 服务器使用 Content-Disposition = inline 发送文件也很重要。如果您自己阅读文件并将其内容发送到浏览器，则情况可能并非如此：

在 php 中它看起来像这样......

...headers...
header("Content-Disposition: inline; filename=doc.pdf");
...headers...

readfile('localfilepath.pdf')

【讨论】：

【解决方案4】：

直接 PDF 无法在手机上运行，并且不支持响应式 UI。这是最好的解决方案。 https://stackoverflow.com/a/66548544/2078462

【讨论】：

【解决方案5】：

这样做：记得关闭 iframe 标记。

<iframe src="http://samplepdf.com/sample.pdf" width="800" height="600"></iframe>

【讨论】：