在HTML中嵌入PDF的推荐方法？

I had to preview a PDF with React so after trying several libraries my optimal solution was to fetch the data and ebmed it.

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

1. Construct a blob of the input PDF bytes
2. Use an iframe and PDF.js patched with this cross browser workaround

The URI for the iframe should look something like this:

/viewer.html?file=blob:19B579EA-5217-41C6-96E4-5D8DF5A5C70B

Now FF, Chrome, IE 11, and Edge all display the PDF in a viewer in the iframe passed via standard blob URI in the URL.

<object width="400" height="400" data="helloworld.pdf"></object>

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/

Scribd不再要求您将文档托管在其服务器上。如果您使用他们创建一个帐户，那么您将获得一个发布者ID。只需几行JavaScript代码即可加载存储在您自己的服务器上的PDF文件。

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

您可以像这样使用保存的pdf的相对位置：

例1

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

例2

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

FDView将PDF2SWF（其本身基于xpdf）与SWF查看器结合在一起，因此您可以在服务器上即时转换和嵌入PDF文档。

xpdf不是一个完美的PDF转换器。如果需要更好的结果，则Ghostview可以将PDF文档转换为其他格式，从而可以更轻松地为其构建Flash查看器。

但是对于简单的PDF文档，FDView应该可以正常工作。

看看这段代码-将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>

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

您也可以为此使用Google PDF查看器。据我所知，这不是Google的正式功能（我对这个功能有误吗？），但它对我非常顺利。您需要先上传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。

这一点很快速，容易，并且不需要任何第三方脚本：

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

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

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

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