如果可能的话，使用本机解决方案，它总是最好的解决方案，因为它来自本机浏览器(使用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

更新- adobepdf嵌入API

Adobe发布了他们的adobepdf嵌入API，这是完全免费的。由于他们自己创建了PDF格式，他们的API可能是最好的。

它提供了最高质量的PDF渲染。 您可以完全自定义用户体验并选择如何显示PDF。 您还可以分析PDF的使用情况，以便了解用户如何与PDF交互，包括在页面和搜索上花费的时间。

你所要做的就是创建一个api_key并在代码片段中使用它。

通过file_url显示PDF

下面是代码片段的示例，您可以将其添加到HTML中，并利用它们的API通过file_url显示PDF。你必须添加{location: {url: "url_of_the_pdf"}}配置。

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { location: { url: "url_of_the_pdf" } },
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

将PDF显示为缓冲区

下面是代码片段的示例，如果您有缓冲区(例如本地文件)，您可以将其添加到HTML中，并利用它们的API来显示PDF。你必须添加{promise: <FILE_PROMISE>}配置。

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { promise: <FILE_PROMISE> }
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

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

免费的解决方案

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

商业服务提供商

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

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

值得注意的PDF是您应该考虑的选项之一 它有一个免费的计划，除非你打算在pdf文件上进行实时在线协作

将以下iframe嵌入到任何html并享受结果:

<iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>

创建一个容器来保存PDF < div id = "例二" > < / div > 告诉PDFObject要嵌入哪个PDF，以及在哪里嵌入它 < script src = " / js / pdfobject.js " > < /脚本> > <脚本PDFObject.embed(“/ pdf / sample-3pp.pdf”、“#例二”),> < /脚本 您可以选择使用CSS来指定视觉样式，包括尺寸、边框、页边距等。 <时尚> .pdfobject-container{高度:500px;} .pdfobject {border: 1px solid #666;｝ > < /风格

来源:https://pdfobject.com/