Question

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

Answer 1

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

<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>

Answer 2

而不是使用iframe，并根据third party，考虑使用flexpaper或pdf.js。

我使用pdf.js，它对我来说很好。

这是演示：http://mozilla.github.com/pdf.js/web/viewer.html

Answer 3

最简单的方法是创建iframe并将来源设置为PDF的网址。

（鸭子疯狂的HTML设计师）自己完成，工作正常，跨浏览器（爬进沙坑）。

Answer 4

首选使用对象标签

<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

Answer 5

浏览器的插件控制这些设置，因此您无法强制它。但是，您可以执行简单的<a href="whatver.pdf">而不是<a href="whatever.pdf" target="_blank">。

Answer 6

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

Answer 7

只要您托管PDF，目标属性就是您的选择。换句话说，对于相对文件，使用带有_blank值的target属性将正常工作。

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

对于绝对路径，引擎将转到 U nified R esource L ocator并打开它们。所以，抑制目标属性。

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

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

Answer 8

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

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

现场示例：

<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">

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

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

Answer 9

您可以使用此代码：

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

或使用Google文档嵌入式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>

Answer 10

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

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

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

Answer 11

简单的解决方案是将其放在iframe中，并希望用户有一个支持它的插件。

（我没有，Acrobat插件一直是如此资源匮乏和不稳定的来源，我指出要从它接触的任何浏览器中删除它。）

复杂但相对流行的解决方案是将其显示在flash applet中。

Answer 12

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

Answer 13

最近，我需要提供一个更加便于移动的，响应性强的.pdf文档版本，因为狭窄的电话屏幕需要左右左右滚动很多。为了只允许垂直滚动并避免水平滚动，请执行以下步骤：

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

结果看起来不错，并且可以在台式机和移动环境中使用。

Answer 14

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

Answer 15

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

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

在Web浏览器中显示PDF

15 个答案: