HTML 嵌入式 PDF iframe [英] HTML embedded PDF iframe

查看：41 发布时间：2021/12/14 15:05:14 html pdf iframe internet-explorer-8

本文介绍了HTML 嵌入式 PDF iframe的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已使用该标签嵌入 pdf 文件.

<iframe id="iframepdf" src="files/example.pdf"></iframe>

这在 Chrome、IE8+、Firefox 等中工作正常，但出于某种原因，当某些人在 IE8 中查看它时，文件正在下载而不是嵌入.我知道这个浏览器已经过时了，但它是我办公室的标准浏览器，因此，必须为此设计网站.

有没有人知道为什么会发生这种情况，我该如何修复它或放置错误消息而不是让文件下载?

解决方案

下载了可能是因为没有安装 Adobe Reader 插件.在这种情况下，IE(哪个版本无关紧要)不知道如何渲染它，它只会下载文件(例如，Chrome 有自己的嵌入式 PDF 渲染器).

说的.</code> 不是显示 PDF 的最佳方式(不要忘记与移动浏览器的兼容性，例如 Safari).某些浏览器将始终在外部应用程序中(或在另一个浏览器窗口中)打开该文件.我发现的最佳和最兼容的方式有点棘手，但适用于我尝试过的所有浏览器(甚至已经过时):</p><p>保留您的 <<code>iframe></code> 但不要在其中显示 PDF，它将填充一个包含 <code><object></code> 标签的 HTML 页面.为您的 PDF 创建一个 HTML 包装页面，它应该看起来<em>像</em>这样:</p><pre><code><html><身体><对象数据=your_url_to_pdf";类型=应用程序/pdf"><div>未安装在线 PDF 查看器</div></对象></body></html></code></pre><p>当然，您仍然需要在浏览器中安装相应的插件.另外，如果您需要在移动设备上支持 Safari，请查看<a href="https://stackoverflow.com/questions/8237708/making-embedded-pdf-scrollable-in-ipad">这篇文章</a>.</p><p>为什么是 HTML 页面?因此，如果不支持 PDF 查看器，您可以提供后备.内部查看器、纯 HTML 错误消息/选项等...</p><p>检查 PDF 支持很棘手，以便您可以为您的客户提供备用查看器，请查看 <a href="https://github.com/mozilla/pdf.js/" rel="nofollow noreferrer">PDF.JS</a> 项目；它非常好，但渲染质量 - 对于桌面浏览器 - 不如 <em>原生</em> PDF 渲染器(我想，由于屏幕尺寸，我没有看到移动浏览器中的任何差异).</><p>如果您想<em>尝试</em>检测 PDF 支持，您<em>可以</em>:</p><ul><li><code>!!navigator.mimeTypes[application/pdf"]?.enabledPlugin</code>(现已弃用，可能仅在某些浏览器中受支持).</li><li><code>navigator.pdfViewerEnabled</code>(实时标准，它可能会改变，目前尚未得到广泛支持).</li></ul><p>I have used the tag to embed a pdf file. </p><pre><code><iframe id="iframepdf" src="files/example.pdf"></iframe> </code></pre><p>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. </p> <p>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?</p><div class="h2_lin"> 解决方案 </div><p>It's downloaded <em>probably</em> because 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 the file (Chrome, for example, has its own embedded PDF renderer).</p> <p>That said. <code><iframe></code> 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):</p> <p>Keep your <<code>iframe></code> but do not display a PDF inside it, it'll be filled with an HTML page that consists of an <code><object></code> tag. Create an HTML wrapping page for your PDF, it should look <em>like</em> this:</p><pre><code><html> <body> <object data="your_url_to_pdf" type="application/pdf"> <div>No online PDF viewer installed</div> </object> </body> </html> </code></pre><p>Of course, you still need the appropriate plug-in installed in the browser. Also, look at <a href="https://stackoverflow.com/questions/8237708/making-embedded-pdf-scrollable-in-ipad">this post</a> if you need to support Safari on mobile devices.</p> <p>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...</p> <p>It's tricky to check PDF support so that you may provide an alternate viewer for your customers, take a look at <a href="https://github.com/mozilla/pdf.js/" rel="nofollow noreferrer">PDF.JS</a> project; it's pretty good but rendering quality - for desktop browsers - isn't as good as a <em>native</em> PDF renderer (I didn't see any difference in mobile browsers because of screen size, I suppose).</p> <p>If you want to <em>try</em> to detect PDF support you <em>could</em>:</p> <ul> <li><code>!!navigator.mimeTypes["application/pdf"]?.enabledPlugin</code> (now deprecated, possibly supported only in some browsers).</li> <li><code>navigator.pdfViewerEnabled</code> (live standard, it might change and it's not currently widely supported).</li> </ul> <p>这篇关于HTML 嵌入式 PDF iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2670522');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="HTML嵌入式PDF iframe" href="/860934.html"> HTML嵌入式PDF iframe; </a> </li> <li> <a target="_blank" title="如何禁用右键单击嵌入式pdf iframe" href="/1099902.html"> 如何禁用右键单击嵌入式pdf iframe; </a> </li> <li> <a target="_blank" title="HTML嵌入式PDF的&amp;负载" href="/864564.html"> HTML嵌入式PDF的&amp;负载; </a> </li> <li> <a target="_blank" title="带嵌入式HTML的PDF报告" href="/865360.html"> 带嵌入式HTML的PDF报告; </a> </li> <li> <a target="_blank" title="提取嵌入式pdf" href="/1735986.html"> 提取嵌入式pdf; </a> </li> <li> <a target="_blank" title="停止嵌入式 YouTube iframe?" href="/2700836.html"> 停止嵌入式 YouTube iframe?; </a> </li> <li> <a target="_blank" title="下载嵌入式PDF文件" href="/2068839.html"> 下载嵌入式PDF文件; </a> </li> <li> <a target="_blank" title="无声打印嵌入式PDF" href="/861038.html"> 无声打印嵌入式PDF; </a> </li> <li> <a target="_blank" title="保存/打印pdf嵌入式" href="/1491479.html"> 保存/打印pdf嵌入式; </a> </li> <li> <a target="_blank" title="嵌入式Flash视频样本PDF？" href="/24090.html"> 嵌入式Flash视频样本PDF？; </a> </li> <li> <a target="_blank" title="从网站保存嵌入式pdf" href="/875071.html"> 从网站保存嵌入式pdf; </a> </li> <li> <a target="_blank" title="TCPDF将带有html的嵌入式SVG转换为PDF" href="/1887232.html"> TCPDF将带有html的嵌入式SVG转换为PDF; </a> </li> <li> <a target="_blank" title="清理用户提交的HTML，但保留安全的嵌入式iframe" href="/877169.html"> 清理用户提交的HTML，但保留安全的嵌入式iframe; </a> </li> <li> <a target="_blank" title="ggplot嵌入式字体在pdf中" href="/768560.html"> ggplot嵌入式字体在pdf中; </a> </li> <li> <a target="_blank" title="覆盖嵌入式pdf以上的图像" href="/892567.html"> 覆盖嵌入式pdf以上的图像; </a> </li> <li> <a target="_blank" title="嵌入式 YouTube iframe 不再自动播放" href="/2507690.html"> 嵌入式 YouTube iframe 不再自动播放; </a> </li> <li> <a target="_blank" title="Youtube iframe嵌入式视频不工作（黑屏）" href="/573973.html"> Youtube iframe嵌入式视频不工作（黑屏）; </a> </li> <li> <a target="_blank" title="黑莓的嵌入式 HTML 控件?" href="/2664772.html"> 黑莓的嵌入式 HTML 控件?; </a> </li> <li> <a target="_blank" title="CKEditor和iFrame / YouTube /其他嵌入式插件显示奇怪的HTML代码" href="/1996565.html"> CKEditor和iFrame / YouTube /其他嵌入式插件显示奇怪的HTML代码; </a> </li> <li> <a target="_blank" title="如何使用 iframe 为嵌入式 youtube 放置海报" href="/2507616.html"> 如何使用 iframe 为嵌入式 youtube 放置海报; </a> </li> <li> <a target="_blank" title="从父级导航嵌入式 Google Apps Script iFrame" href="/2676773.html"> 从父级导航嵌入式 Google Apps Script iFrame; </a> </li> <li> <a target="_blank" title="如何避免嵌入式iframe元素的OnDocumentComplete事件？" href="/622002.html"> 如何避免嵌入式iframe元素的OnDocumentComplete事件？; </a> </li> <li> <a target="_blank" title="YouTube iframe嵌入式无法以高清方式启动" href="/892194.html"> YouTube iframe嵌入式无法以高清方式启动; </a> </li> <li> <a target="_blank" title="如何在嵌入式 YouTube iFrame 端触发功能" href="/2840329.html"> 如何在嵌入式 YouTube iFrame 端触发功能; </a> </li> <li> <a target="_blank" title="从嵌入式iframe中获取全局变量" href="/892496.html"> 从嵌入式iframe中获取全局变量; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = 'html,嵌入式,pdf,iframe'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>