在网络浏览器中显示 PDF答案

【问题标题】：Display PDF within web browser在网络浏览器中显示 PDF
【发布时间】：2011-06-18 17:48:08
【问题描述】：

如何在网络浏览器中的 .html 页面上显示 pdf？

【问题讨论】：

【解决方案1】：

我使用 Google Docs 可嵌入的 PDF 查看器。这些文档不必上传到 Google Docs，但必须在线提供。

<iframe src="http://docs.google.com/gview?url=http://path.com/to/your/pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

【讨论】：

使用此解决方案，部分用户看不到 PDF 文件，但被 google 要求先登录。
我对此解决方案有疑问。谷歌会在其服务器中存储我的 pdf 文件的副本吗？我的内容的隐私会得到保护吗？
@Alex 肯定知道，尝试...我会尝试 - ://docs.google.com/gview?url=://path.com/to/your/pdf.pdf&embedded =true 作为 iframe src
这与@Will 直接将 iFrame 的 src 设置为 pdf 的解决方案有何不同/更好？我认为直接链接将依赖于软件客户端来实际显示 pdf，但谷歌文档不也能做到吗？
@hd。是的，Google 只是通过其嵌入式显示器显示 PDF。我认为他们不会保留副本，尽管他们必须将其转换为逐页显示，所以在某些时候我希望他们逐页转换为 PNG。对于使用此答案的任何人，请注意 Google 对非 Google Document 文档有带宽限制。一旦用尽，PDF 就不会显示，只是一条消息，指出已超出带宽，稍后再试。

【解决方案2】：

不要使用 iframe 并依赖第三方`考虑使用 flexpaper 或 pdf.js。

我使用了PDF.js，它对我来说很好用。 Here is the demo.

【讨论】：

怎么不是第三方？
这是第三方代码而不是第三方服务。
VPN环境应用的更好解决方案。

【解决方案3】：

首选使用对象标签

<object data='http://website.com/nameoffolder/documentname.pdf#toolbar=1' 
        type='application/pdf' 
        width='100%' 
        height='700px'>

请注意，您可以将宽度和高度更改为您访问的任何值 http://www.w3schools.com/tags/tag_object.asp

【讨论】：

您发布的点赞并没有为答案提供更多见解。
问题是如何在 .html 页面上的网络浏览器中显示 pdf？使用 html 5 对象标签将有助于 ... 使用此元素嵌入多媒体（如音频、视频、Java 小程序、 ActiveX、PDF 和 Flash）。
你是完全正确的，但是 w3schools 的链接没有提供更多信息来补充你写的答案。
如果您的浏览器中没有任何 pdf 查看器，这将不起作用
是的，这是真的。对象标签的一个好处是它可以检测到这一点。它允许您为访问者提供更多选项，以通过 gdrive、onedrive 等查看页面。

【解决方案4】：

最简单的方法是创建一个iframe 并将源设置为 PDF 的 URL。

（鸭子疯狂的 HTML 设计师）我自己做的，工作正常，跨浏览器（爬进地堡）。

【讨论】：

如果IE没有安装pdf插件就不行
这有多明显？似乎是“跨浏览器”的有用附录。
这比所有其他 3rd 方的设置要容易得多。我不知道它在 2011 年的表现如何，但在 2016 年它非常快并且充满了有用的功能。似乎在 Chrome、FF 和 IE 上也能很好地工作
它在 Android 手机上的 Chrome 中对我不起作用：它下载 pdf 并在单独的应用程序中打开它（如果你有的话）。而且我无法滚动到 iOS 上 Safari 中的其他页面。我只看到pdf的第一页。

【解决方案5】：

浏览器的插件控制着这些设置，所以你不能强制它。但是，您可以使用简单的<a href="whatver.pdf"> 而不是<a href="whatever.pdf" target="_blank">。

【讨论】：

终于有人知道他们在谈论这个答案了。这是最好的答案，也是最简单的。 @jschorr 是绝对正确的。浏览器控制这些设置。效率最高！！

【解决方案6】：

只要您托管 PDF，目标属性就是要走的路。换句话说，对于相关文件，使用带有 _blank 值的目标属性就可以了。

<e>
  <a target="_blank" alt="StackExchange Handbook" title="StackExchange Handbook"
     href="pdfs/StackExchange_Handbook.pdf">StackExchange Handbook</a>

对于绝对路径，引擎将转到 Unified Resource Locator 并将其打开。所以，抑制目标属性。

<e>
  <a alt="StackExchange Handbook" title="StackExchange Handbook"
     href="protocol://url/StackExchange_Handbook.pdf">StackExchange Handbook</a>

浏览器在这两种情况下都会做得很好。

【讨论】：

这个解决方案对我来说比接受的答案更好。还应该注意的是，我处理一些敏感信息，所以不公开我的文件对我来说很重要。

【解决方案7】：

您还可以通过 PDFObject 等第三方解决方案使用 JavaScript 嵌入。

【讨论】：

【解决方案8】：

您可以使用此代码：

<embed src="http://domain.com/your_pdf.pdf" width="600" height="500" alt="pdf" pluginspage="http://www.adobe.com/products/acrobat/readstep2.html">

或使用 Google Docs 可嵌入的 PDF 查看器：

<iframe src="http://docs.google.com/gview?url=http://domain.com/your_pdf.pdf&embedded=true" 
style="width:600px; height:500px;" frameborder="0"></iframe>

【讨论】：

【解决方案9】：

如果您不想使用某些第三方，可以在src 属性中使用带有文件源的<embed> 标签。这使用本机浏览器 PDF 查看器。

<embed src="your_pdf_src" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf">

活生生的例子：

&lt;embed src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" style="position:absolute; left: 0; top: 0;" width="100%" height="100%" type="application/pdf"&gt;

^{在 sn-p 中加载 PDF 不起作用，因为加载插件的框架是沙盒。}

在 Chrome 和 Firefox 中测试。 See it in action.

【讨论】：

【解决方案10】：

您也可以使用这种简单的 GoogleDoc 方法。

<a  style="color: green;" href="http://docs.google.com/gview?url=http://domain//docs/<?php echo $row['docname'] ;?>" target="_blank">View</a>

这将创建一个新页面供您查看文档，而不会影响您的流程。

【讨论】：

这很好用，谢谢。但是在这种情况下，如果用户想在没有互联网连接的情况下查看 pdf 文件呢？
您可以使用 JQuery 库，例如 pdf.js github.com/mozilla/pdf.js .. 2. 查看 PDFObject，它是一个用于在 HTML 文件中嵌入 PDF 的 Javascript 库。它很好地处理了浏览器兼容性，并且很可能在 IE8 上运行。

【解决方案11】：

简单的解决办法就是放在一个iframe中，希望用户有插件支持。

（我不知道，Acrobat 插件一直占用大量资源并造成不稳定，因此我特意将其从它所接触的任何浏览器中删除）。

复杂但相对流行的解决方案是将其显示在 Flash 小程序中。

【讨论】：

【解决方案12】：

我们使用JPedal（一个Java 库）在服务器上将PDF 文件页面呈现为PNG 文件。结合一些 javascript，我们可以高度控制可视化和导航。

【讨论】：

我觉得这很好，但是需要很多资源。
但用户无法从 PNG 复制/粘贴文本。

【解决方案13】：

我最近需要提供一个对移动设备更友好、响应速度更快的 .pdf 文档版本，因为狭窄的手机屏幕需要大量左右滚动。为了只允许垂直滚动并避免水平滚动，以下步骤对我有用：

在 Chrome 浏览器中打开 .pdf
点击使用 Google 文档打开
点击文件 > 下载 > 网页
点击下载的文件解压
点击解压后的 HTML 文档在 Chrome 浏览器中打开
按 fn F12 打开 Chrome 开发工具
将副本（document.documentElement.outerHTML.replace(/padding:72pt 72pt 72pt 72pt;/, '').replace(/margin-right:.*?pt/g, '')) 粘贴到控制台中，然后按 Enter 将调整后的文档复制到剪贴板
打开文本编辑器（例如记事本），或者在我的情况下使用 VSCode，粘贴并使用 .html 扩展名保存。

结果看起来不错，可以在桌面和移动环境中使用。

【讨论】：

【解决方案14】：

显示以 PDF/DOC/DOCX 文件格式保存的内容is ideal for displaying the pdf/doc/docx file on your web page

【讨论】：

【解决方案15】：

您是否尝试过使用简单的 img 标签？

<img scr="https://www.typomania.co.uk/pdfs/lipsum.pdf">

【讨论】：

有人知道这是如何支持的吗？
这是不可能的。