题 在HTML中嵌入PDF的推荐方法?


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

  • 的iFrame?
  • 目的?
  • 嵌入?

Adobe对此有何看法?

就我而言,PDF是即时生成的,因此在刷新之前无法将其上传到第三方解决方案。


983
2017-11-14 23:55


起源


试试pdf2htmlEX: github.com/coolwanglu/pdf2htmlEX - Tezcat


答案:


可能最好的方法是使用 PDF.JS 图书馆。这是纯粹的 HTML5/JavaScript的 没有任何第三方插件的PDF文档渲染器。

在线演示: http://mozilla.github.com/pdf.js/web/viewer.html

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


449
2017-11-15 00:01



如另一个答案所述,scribd实际上使用pdf2swf来转换pdf文件 - Peter Craig
我强烈建议不要使用scribd - 我刚刚对特定文档进行了实验,而在firefox 4中它只显示前3页,而在IE9中它的渲染文本错误 - 它偏移了页面的某些部分。从技术上讲,它是有缺陷的。此外,他们希望您订阅打印或下载文档!基本上他们正在获取以前免费的文件并在他们周围架设付费墙。 - frankster
PDF.js库实际上看起来是一个非常好的解决方案,虽然链接的演示没有显示它嵌入在页面中(它占用了整个页面)。但它使用HMTL5画布,因此它应该很容易嵌入,而且它是 快速。在不利方面,它需要一些js才能使用 <object>: github.com/mozilla/pdf.js/blob/master/examples/helloworld/... - LarsH
pdf.js在Chrome等平板电脑浏览器上效果不佳。对于较大的pdf文档,我也发现它非常非常慢。 - Rocco The Taco
我不相信这是推荐的。看一下在线演示中的字体渲染,它们看起来很麻烦,很糟糕。在adobe reader中打开时,使用子像素渲染效果会更好。 - speedplane


这是快速,简单的,不需要任何第三方脚本:

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

更新(1/2018):

Android上的Chrome浏览器不再支持PDF嵌入。您可以使用Google云端硬盘PDF查看器解决此问题

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

405
2017-08-12 17:29



最好使用<object>标签,以便包含后备。 - Jonathon Hill
嗯,为了什么?它适用于FF,Chrome和IE 7/8/9。 - Batfan
如果你想确保它会显示而不是自动下载pdf(因为它发生在我身上)添加 type='application/pdf' 到嵌入标签 - Hassek
更好用 <object> 标记,因为它可以在无法显示pdf的浏览器中显示替代内容。甚至可以放一个 <embed> 标签 <object> 标记,如果你想。参考: stackoverflow.com/questions/1244788/embed-vs-object - Raphael
它需要adobe reader插件才能查看PDF .. - Deadlock


您也可以使用Google PDF查看器来实现此目的。据我所知,这不是官方的谷歌功能(我错了吗?),但它对我非常好,顺利。您需要在之前的某个地方上传PDF并使用其URL:

<iframe src="http://docs.google.com/gview?url=http://example.com/mypdf.pdf&embedded=true" style="width:718px; height:700px;" frameborder="0"></iframe>

重要的是它不需要Flash播放器,而是使用JavaScript。


326
2018-03-10 13:38



应该提到的一件事是,可以显示的PDF大小有一个上限。我认为它目前是10MB / 100页。 PS:我不认为观众是“非官方的”;他们甚至有一个为您构建嵌入URL的操作页面: docs.google.com/viewer - SuperElectric
此选项效果很好,但您必须公开访问PDF,这对我来说并不总是一种选择。 - KoviNET
@RonSmith,它不再需要登录.. - riot_starter
您可以在其间设置任何Google文档的隐私权 public, sign-in required,和 private。这绝对是一个官方功能,考虑到Google Docs上的任何文档都有 embed 选项。 - b1nary.atr0phy
应该提到的另一件事是“你最近提出了太多请求”警告,这是一个限制。 - kommradHomer


通过在查询字符串中传递一些选项,您可以控制PDF在浏览器中的显示方式。我很高兴这个工作,直到我意识到它在IE8中不起作用。 :(

它适用于Chrome 9和Firefox 3.6,但在IE8中,它会显示消息“如果无法显示PDF,请在此处插入错误消息”。

不过,我还没有测试过任何上述浏览器的旧版本。但是这里是我所拥有的代码,以防它帮助任何人。这将缩放设置为85%,删除滚动条,工具栏和导航窗格。如果我确实遇到过在IE中运行的东西,我会更新我的帖子。

<div id="pdf">
  <object width="400" height="500" type="application/pdf" data="/my_pdf.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" id="pdf_content">
    <p>Insert your error message here, if the PDF cannot be displayed.</p>
  </object>
</div>

83
2018-03-02 18:36



这是最好的解决方案,因为它使用的是浏览器功能,而不是复杂的第三方解决方案。在所有现代浏览器(IE9,FF或Chrome)中,PDF应该很好地嵌入。对不起IE 6/7用户。他们必须升级。我们很久以前就停止支持这些浏览器了。 :( - Adrian P.
不适用于我的移动平板电脑版Chrome ..FYI ...可惜,本来是一个快速修复。 - Rocco The Taco
用于解决缩放和滚动选项的+1,但是,这在最新的Chrome版本中无效(44)...无法加载PDF文档。 - NotJay
可以添加关闭按钮吗?如何? - Roberto Sepúlveda Bravo
@RoccoTheTaco借调,不适用于Android上的移动Chrome - Anonymous


使用两者 <object> 和 <embed> 将为您提供更广泛的浏览器兼容性。

<object data="http://yoursite.com/the.pdf" type="application/pdf" width="750px" height="750px">
    <embed src="http://yoursite.com/the.pdf" type="application/pdf">
        <p>This browser does not support PDFs. Please download the PDF to view it: <a href="http://yoursite.com/the.pdf">Download PDF</a>.</p>
    </embed>
</object>

45
2018-05-15 14:36



如果未安装或过期的pdf插件,这将无法在浏览器中使用 - Umair Hamid
此外,这不会验证与代码验证有关的那些。 - NotJay
对象标签没有 src 属性 - 使用 data。另外 - 使用 type="application/pdf" 在两个标签中 - eithed
@eithedog答案更新。 - Suneel Kumar
这对我很有用,而使用 embed 标签本身被视为 unsafe 通过Chrome和Firefox。 - Richie Thomas


通过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)可以工作 喜欢这个 但它有自己的特殊要求。


19
2017-12-06 18:17



或者使用应用程序将图像转换为PNG,例如在Mac上预览。 - Garrett
但你能以编程方式做到吗? - Dan Mantyla
如果文档有超过1页怎么办?我想你只会显示第一页 - seb
@seb已经有一段时间了,但我能够在2或3页长的PDF上使用它。我认为移动浏览器难以显示这样的图像,这不是明智的做法。这就是为什么我称之为“快速而肮脏”的方法,但只要PDF不超过几页,我认为这是一个很好的方法。 - Dan Mantyla
如果您使用zend库打开PDF,那么您可以执行 foreach($pdf->pages as $page) 并为每个页面创建一个图像 - 99 Problems - Syntax ain't one


查看此代码 - 将PDF嵌入HTML中

<!-- Embed PDF File -->
<object data="YourFile.pdf" type="application/x-pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>

13
2017-11-15 23:11



这似乎不起作用。我总是以灰色屏幕而不是pdf结束。但转换 src 对于 data,就像@ Gayle的回答一样,确实有效。 - Mottie
我使用的是Chrome 44,但它不起作用。我也尝试过将数据切换到src。 - NotJay
对象是HTML 5,您使用的是正确的doctype吗? - jakeonrails


FDView 联合收割机 PDF2SWF (它本身就是基于 xpdf的) 与 SWF 查看器,以便您可以在服务器上即时转换和嵌入PDF文档。

xpdf不是一个完美的PDF转换器。如果你需要更好的结果 Ghostview工具 有一些能力将PDF文档转换为其他格式,您可以更轻松地为其构建Flash查看器。

但对于简单的PDF文档,FDView应该可以很好地工作。


12
2017-11-15 23:50



FDView可以在其他地方使用吗? code4net.com似乎已经消失了。 - Michael Myers♦
@Michael不是我能轻易找到的。我会把这个答案留给有人在其他地方重新主持fdview的机会。 - Adam Davis


Scribd不再要求您在其服务器上托管您的文档。如果您使用这些帐户创建帐户,则会获得发布商ID。只需几行JavaScript代码即可加载存储在您自己的服务器上的PDF文件。

有关详细信息,请参阅 开发者工具


7
2017-08-19 00:30



你能发贴另一个链接来展示这是怎么做的吗?从您发布的链接中不清楚。 - SuperElectric
似乎他们已经更新了他们的网站并更改了此页面。我认为此页面包含我在原帖中提到的内容: scribd.com/developers/api?method_name=Javascript+API - Bjorn
我希望我能不止一次地喜欢这个,它完美无缺。滚动到网站底部,然后点击API查看示例。 - Rocco The Taco
注册现已关闭scribd。 - Lance Fisher


  1. 创建一个容器来保存PDF

    <div id="example1"></div>
    
  2. 告诉PDFObject嵌入哪些PDF以及嵌入它的位置

    <script src="/js/pdfobject.js"></script>
    <script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>
    
  3. 您可以选择使用CSS指定视觉样式,包括尺寸,边框,边距等。

    <style>
    .pdfobject-container { height: 500px;}
    .pdfobject { border: 1px solid #666; }
    </style>
    

资源 : https://pdfobject.com/


5
2018-02-03 14:36