如何在页面中嵌入PDF查看器?


89

如果我没有记错的话,Google Docs提供了一种通过来显示与网页存储在同一服务器上的PDF的方法<iframe>,但是我需要知道如何以跨浏览器兼容的方式来执行此操作。

Answers:


197

您可以考虑使用Philip Hutchison的PDFObject

另外,如果您正在寻找非JavaScript解决方案,则可以使用如下标记:

<object data="myfile.pdf" type="application/pdf" width="100%" height="100%">
  <p>Alternative text - include a link <a href="myfile.pdf">to the PDF!</a></p>
</object>

自2012年以来,内容可能有所变化,但如果我使用这种方法,则Chrome会自动下载PDF并在外部浏览器中打开。
Egon Willighagen

33

PDF.js是一个HTML5技术实验,旨在探索在没有本机代码帮助的情况下构建忠实高效的可移植文档格式(PDF)渲染器的过程。它是社区驱动的,并由Mozilla Labs支持。

您可以在此处查看演示。


16

这样可能会更好一些

<embed src= "MyHome.pdf" width= "500" height= "375">

这对我有用。但是我还必须添加属性type="application/pdf"
Iliar Turdushev

9

如果我没记错的话,OP正在询问(尽管后来接受了.js解决方案)Google的嵌入式PDF显示服务器是否会在自己的网站上显示PDF。

因此,一年半之后:是的,它将。

请参阅http://googlesystem.blogspot.ca/2009/09/embeddable-google-document-viewer.html。另外,请参阅https://docs.google.com/viewer,并插入要显示的文件的URL。

编辑:重新阅读,OP要求不使用iFrame的解决方案。我认为Google的查看器无法做到这一点。



3

确保跨不同的Reader首选项测试任何解决方案。相对于浏览器,站点访问者可以将其浏览器设置为在Reader / Acrobat中打开PDF,例如,通过在Firefox中禁用Acrobat插件。

我不确定结果如何,因为我有两个不同的Adobe Acrobat和Adobe Reader版本,因此Firefox可以识别两个不同的Acrobat插件,但是看来您至少需要测试如果访问网站的人会发生什么情况已将其浏览器设置为无法在浏览器中打开PDF。当他们查看似乎可以使用的网页并且浏览器正在困扰他们以打开他们认为自己没有要求的PDF文件时,这可能会很烦人。在某些情况下,PDF文件是在Adobe Reader中而不是在浏览器中自发打开的,而在其他情况下,浏览器会弹出一个对话框,指出该文件不存在。

我遇到了与iframe和object都不匹配的情况,针对不同的代码存在不同的问题。

这是用于简单的HTML代码。我还没有尝试过建议的框架。


1

我真的会选择FlowPaper,尤其是他们的新Elements模式,可以在这里找到:https ://flowpaper.com/demo/

在保持文本清晰的同时,它可以显着展平PDF,这意味着它将在移动设备上更快地加载


1

使用引导程序,您可以拥有响应快速且移动优先的嵌入式文件。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="address of your file" allowfullscreen></iframe>
</div>

Aspect ratios can be customized with modifier classes.
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

0

coolwanglu的pdf2htmlEX可能是将pdf文件转换为html的最佳解决方案。您可以进行简单的转换,然后将html页面作为iframe或类似内容嵌入。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.