在HTML中嵌入PDF的推荐方法是什么?

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

在我的例子中,PDF是动态生成的,因此不能在刷新之前将其上传到第三方解决方案。


当前回答

如果可能的话,使用本机解决方案,它总是最好的解决方案,因为它来自本机浏览器(使用embed或iframe),或者你可以使用这个小库来支持你:https://pdfobject.com

大多数人推荐使用著名的pdf。js。它一直工作得很好,直到我需要使用ShadowDOM。有些页面是空白的(白色),有些是黑色的。我不可能知道发生了什么,而且它正在制作中:)。

其他回答

最好的方法可能是使用PDF.JS库。它是一个纯HTML5/JavaScript PDF文档渲染器,没有任何第三方插件。

在线演示: https://mozilla.github.io/pdf.js/web/viewer.html

GitHub: https://github.com/mozilla/pdf.js

通过ImageMagick将其转换为PNG,并显示PNG(快速和肮脏)。

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '<img src="$dir$name.png" />';
?>

如果你需要一个快速的解决方案,想要避免跨浏览器的PDF查看问题,如果PDF只有一页或两页,这是一个很好的选择。当然,您需要在web服务器上安装ImageMagick(这反过来需要Ghostscript),这在共享托管环境中可能不可用。还有一个PHP插件(称为imagick)就像这样工作,但它有自己的特殊要求。

我发现嵌入pdf的最好方法是使用bootstrap,因为它不仅可以显示pdf,而且还可以填充可用空间,您可以根据自己的需要指定比例。下面是我用它做的一个例子:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <div class=" font - family -宋体"> <iframe class="embed- response -item" src="http://example.com/the.pdf" type="application/pdf" allowfullscreen></iframe> . < / div > < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js " > < /脚本>

这是快速、简单、直截了当的,不需要任何第三方脚本:

<embed src="http://example.com/the.pdf" width="500" height="375" 
 type="application/pdf">

更新(2/3/2021)

Adobe现在提供了自己的PDF嵌入API。

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

更新(1/2018):

Android上的Chrome浏览器不再支持PDF嵌入。你可以通过使用谷歌Drive PDF查看器来解决这个问题

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

Scribd不再要求你把你的文档放在他们的服务器上。如果你和他们一起创建一个账号,你就会得到一个出版商ID。只需要几行JavaScript代码就可以加载存储在您自己服务器上的PDF文件。

有关更多详细信息,请参见开发人员工具。