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

iFrame吗? 对象? 嵌入?

Adobe是怎么说的呢?

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


当前回答

同时使用<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>

其他回答

<embed src="data:application/pdf;base64,..."/>

我已经在其他地方回答了这个问题,但是,我在多个解之间做了一个求值。另外,如果你打算用于商业用途,这些可能会有所帮助:

免费的解决方案

iframe:只是使用一个iframe,然而,这不是大多数人在这里搜索的。 [谷歌Docs预览]谷歌Docs有预览(在这里查看其他答案) Pdf.js是没有外部依赖的开源解决方案 Adobe提供了一种“免费”的PDF嵌入API——如果你对基于云的解决方案满意,推荐使用这种方法。

商业服务提供商

Pdf.js Express是Pdf.js的商业化扩展(性能最差的产品,不贵) PSPDFKit -来自奥地利的供应商,提供良好的业务支持(价格适中,产品好) Foxit -中国公司提供PDF网页solton以及。(最便宜的商业报价) PDFTron -美国PSDPDFkit的竞争对手(更昂贵,但也更先进)

希望这能有所帮助。我可能会在博客中发布更详细的信息,如果这对人们有帮助的话(请在评论中告诉我)。

最好的方法可能是使用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文件,或者希望使用额外的安全功能(例如防止用户下载PDF文件)自定义PDF查看器。我建议使用CloudPDF。https://cloudpdf.io

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudPDF Viewer</title>
  <style>
    body, html {
      height: 100%;
      margin: 0px;
    }
  </style>
</head>
<body style="height: 100%">
  <div id="viewer" style="width: 800px; height: 500px; margin: 80px auto;"></div>
  <script type="text/javascript" src="https://cloudpdf.io/viewer.min.js?version=0.1.0-beta.11"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function(){
      const config = { 
        documentId: 'eee2079d-b0b6-4267-9812-b6b9eadb9c60',
        darkMode: true,
      };
      CloudPDF(config, document.getElementById('viewer')).then((instance) => {

      });
    });
  </script>
 </body>
</html>