我已经使用标签嵌入了一个pdf文件。
<iframe id="iframepdf" src="files/example.pdf"></iframe>
这在 Chrome、IE8+、Firefox 等中运行良好,但出于某种原因,当某些人在 IE8 中查看它时,文件正在下载而不是嵌入。我知道这个浏览器已经过时了,但它是我办公室的标准浏览器,因此,网站必须为此设计。
有没有人知道为什么会发生这种情况,我该如何修复它或者发出错误消息而不是让文件下载?
下载了可能因为没有安装Adobe Reader插件。在这种情况下,IE(无论哪个版本)不知道如何渲染它,它只会下载文件(例如,Chrome 有自己的嵌入式 PDF 渲染器)。
如果你想try检测PDF支持你可以:
!!navigator.mimeTypes["application/pdf"]?.enabledPlugin
(现已弃用,可能仅在某些浏览器中受支持)。navigator.pdfViewerEnabled
(实时标准,它可能会改变并且目前未得到广泛支持)。2021:现在原来的答案肯定已经过时了。除非你需要支持相对较旧的浏览器,否则你应该简单地使用
<object>
(最终有后备)并保留它。
就是说。
<iframe>
不是显示 PDF 的最佳方式(不要忘记与移动浏览器的兼容性,例如 Safari)。某些浏览器将始终在外部应用程序(或另一个浏览器窗口)中打开该文件。我发现的最佳和最兼容的方式有点棘手,但适用于我尝试过的所有浏览器(甚至已经过时):
保留您的 <
iframe>
但不要在其中显示 PDF,它将填充由 <object>
标签组成的 HTML 页面。为您的 PDF 创建一个 HTML 包装页面,它应该看起来 like 这个:
<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 项目;它非常好,但渲染质量 - 对于桌面浏览器 - 不如 native PDF 渲染器(我认为由于屏幕尺寸,我没有看到移动浏览器有任何差异)。
如果浏览器安装了 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>
Iframe
<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>
试试这个。
<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>
在我的例子中,我直接设置了链接并且它工作正常。
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<h1>Online HTML Editor</h1>
<div>This is real time online HTML Editor</div>
<iframe id="if1" width="100%" height="900" style="visibility:visible" src="https://www.africau.edu/images/default/sample.pdf"></iframe>
</body>
</html>
注意: 上面在 html 文件中工作的代码在这个 snippest 中不适用于这个堆栈 overfolow
使用 Adobe Embed PDF API。这是我最终使用的解决方案,完美运行。