如果我没有记错的话,Google Docs提供了一种通过来显示与网页存储在同一服务器上的PDF的方法<iframe>
,但是我需要知道如何以跨浏览器兼容的方式来执行此操作。
如果我没有记错的话,Google Docs提供了一种通过来显示与网页存储在同一服务器上的PDF的方法<iframe>
,但是我需要知道如何以跨浏览器兼容的方式来执行此操作。
Answers:
您可以考虑使用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>
这样可能会更好一些
<embed src= "MyHome.pdf" width= "500" height= "375">
type="application/pdf"
。
如果我没记错的话,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的查看器无法做到这一点。
试试看Flex Paper http://flexpaper.devaldi.com/
它像scribd一样工作
确保跨不同的Reader首选项测试任何解决方案。相对于浏览器,站点访问者可以将其浏览器设置为在Reader / Acrobat中打开PDF,例如,通过在Firefox中禁用Acrobat插件。
我不确定结果如何,因为我有两个不同的Adobe Acrobat和Adobe Reader版本,因此Firefox可以识别两个不同的Acrobat插件,但是看来您至少需要测试如果访问网站的人会发生什么情况已将其浏览器设置为无法在浏览器中打开PDF。当他们查看似乎可以使用的网页并且浏览器正在困扰他们以打开他们认为自己没有要求的PDF文件时,这可能会很烦人。在某些情况下,PDF文件是在Adobe Reader中而不是在浏览器中自发打开的,而在其他情况下,浏览器会弹出一个对话框,指出该文件不存在。
我遇到了与iframe和object都不匹配的情况,针对不同的代码存在不同的问题。
这是用于简单的HTML代码。我还没有尝试过建议的框架。
使用引导程序,您可以拥有响应快速且移动优先的嵌入式文件。
<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>