HTML 嵌入式 PDF iframe
Posted
技术标签:
【中文标题】HTML 嵌入式 PDF iframe【英文标题】：HTML embedded PDF iframe 【发布时间】：2013-11-08 09:25:51 【问题描述】：我已使用标签嵌入 pdf 文件。
<iframe id="iframepdf" src="files/example.pdf"></iframe>
这在 Chrome、IE8+、Firefox 等中运行良好，但由于某种原因，当有些人在 IE8 中查看它时，文件正在下载而不是嵌入。我知道这个浏览器已经过时，但它是我办公室的标准浏览器，因此，必须为此设计网站。
是否有人对为什么会发生这种情况有任何想法，我该如何解决它或者输入错误消息而不是让文件下载？
【问题讨论】：
【参考方案1】：它已下载可能，因为没有安装 Adobe Reader 插件。在这种情况下，IE（无论哪个版本）不知道如何渲染它，它只会下载文件（例如，Chrome 有自己的嵌入式 PDF 渲染器）。
如果您想尝试检测 PDF 支持，您可以：
!!navigator.mimeTypes["application/pdf"]?.enabledPlugin（现已弃用，可能仅在某些浏览器中支持）。
navigator.pdfViewerEnabled（实时标准，它可能会改变，目前尚未得到广泛支持）。
2021：现在原始答案肯定已经过时了。除非您需要支持相对较旧的浏览器，否则您应该简单地使用 <object>（最终使用回退）并保留它。
就是这么说的。 <iframe> 不是显示 PDF 的最佳方式（不要忘记与移动浏览器的兼容性，例如 Safari）。某些浏览器将始终在外部应用程序（或另一个浏览器窗口）中打开该文件。我发现的最佳和最兼容的方式有点棘手，但适用于我尝试过的所有浏览器（甚至已经过时了）：
保留您的 iframe>，但不要在其中显示 PDF，它将填充一个包含 <object> 标记的 html 页面。为您的 PDF 创建一个 HTML 包装页，它应该看起来像 这样：
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<div>No online PDF viewer installed</div>
</object>
</body>
</html>
当然，您仍然需要在浏览器中安装相应的插件。另外，如果您需要在移动设备上支持 Safari，请查看this post。
为什么是 HTML 页面？因此，如果不支持 PDF 查看器，您可以提供备用。内部查看器、纯 HTML 错误消息/选项等...
检查 PDF 支持很棘手，以便您可以为您的客户提供备用查看器，请查看PDF.JS 项目；它非常好，但渲染质量 - 对于桌面浏览器 - 不如 native PDF 渲染器好（我想，由于屏幕尺寸，我没有看到移动浏览器有任何差异）。
【讨论】：
有没有办法只在安装了 Adobe Reader 插件的情况下显示 iframe，如果没有则显示错误消息？ 是的...不使用“iframe”！在您可以提供错误消息的地方使用“对象”（或替代视图，请参阅我的答案的最后一部分）。 这现在可以工作了，但是文件被放大了吗？我使用的是 iframe，因为这允许 pdf 适合 div 的宽度。 现在是一样的，但是你必须对每个嵌套元素（html、body、object）应用样式。像往常一样... 对于努力在移动浏览器上获得一致行为的任何人，请参见此处，这对我有帮助：***.com/questions/7437602/…【参考方案2】：如果浏览器安装了 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>
【讨论】：
这个很有魅力，但我使用文档得到了很多No Preview Available
@Ancinek，您是否替换了 mgutt 中的两个 your_url_to_pdf（对象数据中的一个和 google.com/viewer? 中的一个
我用上面的代码滚动条没有在 Ipad 设备中显示.scroll-container max-height: 250px; overflow: auto; -webkit-overflow-scrolling: touch;
Google 查看器似乎杀死了文档中的所有内部书签。【参考方案3】：
试试这个。
<iframe src="https://docs.google.com/viewerng/viewer?url=http://infolab.stanford.edu/pub/papers/google.pdf&embedded=true" frameborder="0" >
</iframe>【讨论】：
效果不错，可以右键，选择打印。 就像一个魅力。最初错过了这一点：&embedded=true【参考方案4】：
iframe
<iframe id="fred" style="border:1px solid #666CCC" title="PDF in an i-Frame" src="PDFData.pdf" frameborder="1" scrolling="auto" ></iframe>
对象
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
【讨论】：
现在如何在该对象上触发打印，打印未定义？ 这里的 iFrame 解决方案正是我需要显示由 MS MVC 后端服务生成并作为视图返回的 PDF。我尝试了所有其他解决方案，但由于某种原因，它们都没有奏效。【参考方案5】：花了很多时间终于找到了解决办法！！！
最好的选择是使用 Adobe 提供的免费服务，PDF embed API。 https://www.adobe.io/apis/documentcloud/dcsdk/
-
创建您的项目
获取您的客户 ID
添加您的域（仅适用于该域）
【讨论】：
这听起来像是广告......【参考方案6】：使用 Adobe Embed PDF API。这是我最终使用的解决方案，效果很好。
【讨论】：
我发现渲染页面有时非常慢，通常需要 30 到 60 秒才能缓慢渲染 PDF 的每个元素，在此期间元素会出现扭曲和不完整，直到完成。那是一个大约 3MB 大小、大约 10 页的 PDF。这是典型的>以上是关于HTML 嵌入式 PDF iframe的主要内容，如果未能解决你的问题，请参考以下文章
在 IFrame（相同域）中嵌入 PDF 并控制高度（滚动条）
如何在没有 iframe 的页面中嵌入 PDF.JS 查看器
在 Android 浏览器上嵌入谷歌文档查看器 iframe