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

IT技术 javascript html pdf iframe browser
2021-02-01 04:12:37

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

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

它在 Firefox 中打开良好,但在 IE8 中无法打开。

有谁知道如何使它也适用于 IE?

5个回答

使用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");
src 路径不会显示在 iFrame 中吗?^
2021-03-18 04:12:37
如果您不想在对象数据标签中公开 pdf 文件的 src 路径怎么办?
2021-03-21 04:12:37
这才是重点。但它正在将 PDF 加载到一个对象而不是 iframe 中。请参阅pdfobject.com/markup/index.php
2021-03-24 04:12:37
这也可以加载图像文件..?
2021-03-28 04:12:37

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

<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:显然,这是一个错误(但有解决方法):

使用 Adob​​e Reader 10.0 在 Internet Explorer 中无法打开 PDF 文件 - 用户会看到一个空白的灰色屏幕。我该如何为我的用户解决这个问题?

我已经尝试过您的链接,但如果您尝试运行,它将在 acrobat 阅读器中打开 PDF,而不是在 IE 的 iframe 中。但是,如果您将在 chrome 或 mozilla 中尝试相同的事情,那么它会按预期正常工作。但我也想在 iframe 中为 IE 打开它
2021-03-12 04:12:37
在桌面浏览器中可以正常工作,但在移动浏览器中不行......你能帮我让它工作吗?
2021-03-12 04:12:37
定义“不能正常工作”。是不是太大了?只需使用vhandvw而不是pixels,阅读更多信息:stackoverflow.com/a/30512369/1654265
2021-03-13 04:12:37
实际上,我已经从 IE 调试器中复制了这就是为什么 jquerry 和其他东西即将到来的原因……否则该类也在代码中。它对 mozilla 工作正常..
2021-04-04 04:12:37

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

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

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

readfile('localfilepath.pdf')

直接 PDF 在手机上不起作用,它不支持响应式 UI。这是最好的解决方案。 https://stackoverflow.com/a/66548544/2078462

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

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