Question

如果我没弄错的话，Google Docs提供了通过iFrame显示与网页存储在同一服务器上的PDF的方法，但我需要知道如何在符合跨浏览器的情况下执行此操作方式。

Answer 1

您可以考虑使用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>

Answer 2

PDF.js是一项HTML5技术实验，旨在探索构建忠实有效的可移植文档格式（PDF）渲染器，而无需本机代码帮助。它由社区驱动，并得到Mozilla Labs的支持。

您可以看到演示here。

Answer 3

这可能会更好一点

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

Answer 4

如果我没弄错的话，OP会询问（虽然后来接受了.js解决方案）Google的嵌入式PDF显示服务器是否会在他自己的网站上显示PDF。

所以，一年半之后：是的，它会。

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

编辑：重新阅读，OP要求的解决方案不使用iFrame。我不认为谷歌的观众可以做到这一点。

Answer 5

试用 Flex Paper http://flexpaper.devaldi.com/

它就像scribd

一样

Answer 6

请务必在不同的Reader首选项中测试任何解决方案。站点访问者可以将其浏览器设置为在Reader / Acrobat中打开PDF而不是浏览器，例如，通过在Firefox中禁用Acrobat插件。

我无法确定我的结果，因为我有两个不同的Acrobat插件，Firefox可识别，因为我有不同版本的Adobe Acrobat和Adobe Reader，但看起来你至少需要测试会发生什么网站访问者将其浏览器设置为不在浏览器中打开PDF。当他们看到看似可用的网页并且他们的浏览器唠叨他们打开他们认为他们没有请求的PDF文件时，可能会非常讨厌。在某些情况下，PDF文件在Adobe Reader中自动打开，而不是在浏览器中打开，在其他情况下，浏览器会弹出一个对话框，说明该文件不存在。

我遇到了与iframe不兼容的问题，而且对不同的代码都有不同的问题。

这是针对简单的HTML代码。我没有尝试过建议的框架。

Answer 7

我真的会选择FlowPaper，特别是他们可以在这里找到的新元素模式： https://flowpaper.com/demo/

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

Answer 8

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

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

Answer 9

coolwanglu的pdf2htmlEX可能是将pdf文件转换为html的最佳解决方案。你可以做一个简单的转换，然后将html页面嵌入为iframe或类似的东西。

如何在网页中嵌入PDF查看器？

9 个答案: