HTML 嵌入式 PDF iframe
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19654577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML embedded PDF iframe
提问by user2931470
I have used the tag to embed a pdf file.
我已经使用该标签嵌入了 pdf 文件。
<iframe id="iframepdf" src="files/example.pdf"></iframe>
This works fine in Chrome, IE8+, Firefox etc, but for some reason, when some people are viewing it in IE8, the files are downloading instead of embedding. I know this browser is outdated but it is the standard browser within my office and as such, the website has to be designed for this.
这在 Chrome、IE8+、Firefox 等中运行良好，但出于某种原因，当某些人在 IE8 中查看它时，文件正在下载而不是嵌入。我知道这个浏览器已经过时了，但它是我办公室的标准浏览器，因此，必须为此设计网站。
Does anyone have any ideas on why this is happening, how I can fix it or else put an error message instead of letting the files download?
有没有人对为什么会发生这种情况有任何想法，我该如何修复它或放置错误消息而不是让文件下载？
回答by Adriano Repetti
It's downloaded probablybecause there is not Adobe Reader plug-in installed. In this case IE (it doesn't matter which version) doesn't know how to render it and it'll simply download file (Chrome, for example, has its own embedded PDF renderer).
下载可能是因为没有安装Adobe Reader插件。在这种情况下，IE（哪个版本无关紧要）不知道如何渲染它，它只会下载文件（例如，Chrome 有自己的嵌入式 PDF 渲染器）。
That said. <iframe>is not best way to display a PDF (do not forget compatibility with mobile browsers, for example Safari). Some browsers will always open that file inside an external application (or in another browser window). Best and most compatible way I found is a little bit tricky but works on all browsers I tried (even pretty outdated):
那说。<iframe>不是显示 PDF 的最佳方式（不要忘记与移动浏览器的兼容性，例如 Safari）。某些浏览器将始终在外部应用程序（或另一个浏览器窗口）中打开该文件。我发现的最佳和最兼容的方式有点棘手，但适用于我尝试过的所有浏览器（甚至已经过时）：
Keep your <iframe>but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <object>tag. Create an HTML wrapping page for your PDF, it should look likethis:
保留您的 <iframe>但不要在其中显示 PDF，它将填充一个包含<object>标签的 HTML 页面。为您的 PDF 创建一个 HTML 包装页面，它应该如下所示：
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Of course you still need the appropriate plug-in installed in the browser. Also take a look to this postif you need to support Safari on mobile devices.
当然，您仍然需要在浏览器中安装相应的插件。如果您需要在移动设备上支持 Safari，也可以看看这篇文章。
1st. Why nesting <embed>inside <object>? You'll find answer here on SO. Instead of nested <embed>tag you may (should!) provide a custom message for your users (or a built-in viewer, see next paragraph). Nowadays <object>can be used without worries and <embed>is useless.
第一。为什么嵌套<embed>在里面<object>？你会在 SO 上找到答案。<embed>您可以（应该！）为您的用户（或内置查看器，请参阅下一段）提供自定义消息，而不是嵌套标签。现在<object>可以放心用，<embed>没用。
2nd. Why an HTML page? So you can provide a fallback if PDF viewer isn't supported. Internal viewer, plain HTML error messages/options and so on...
第二。为什么是 HTML 页面？因此，如果不支持 PDF 查看器，您可以提供后备。内部查看器、纯 HTML 错误消息/选项等...
It's tricky to check PDF support so you may provide an alternate viewer for your customers, take a look to PDF.JSproject, it's pretty good but rendering quality - for desktop browsers - isn't as good as a nativePDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose).
检查 PDF 支持很棘手，因此您可以为您的客户提供备用查看器，查看PDF.JS项目，它非常好，但渲染质量 - 对于桌面浏览器 - 不如原生PDF 渲染器（我没有我想，由于屏幕尺寸的原因，在移动浏览器中看不到任何差异）。
回答by mgutt
If the browser has a pdf plugin installed it executes the object, if not it uses Google's PDF Viewer to display it as plain HTML:
如果浏览器安装了 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>
回答by Muddasir Abbas
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
目的
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
回答by Bilal A.Awan
Try this out.
试试这个。
<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>