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

Question

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

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

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

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

Answer 1

使用

iframe

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

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

在 HTML 中，您可以设置

div

来显示 PDF：

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

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

div

:

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

Answer 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 文件无法在使用 Adobe Reader 10.0 的 Internet Explorer 中打开 - 用户会看到空的灰色屏幕。我该如何为我的用户解决这个问题？

Answer 3

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

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

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

readfile('localfilepath.pdf')

Answer 4

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

Answer 5

我知道已经有一段时间了，但是 PDFObject 发生了一些变化。根据 文档，这就是渲染 PDF 的方式：

<div id="my-pdf"></div>
<script src="https://unpkg.com/pdfobject"></script>
<script>PDFObject.embed("/path/to/file.pdf", "#my-pdf");</script>

Answer 6

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

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