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

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

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

PDF2SWF14" rel="noreferrer">FDView将PDF2SWF（它本身基于xpdf）与SWF查看器相结合，因此您可以在服务器上动态转换和嵌入PDF文档。

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

但对于简单的PDF文档，FDView应该工作得相当好。

要将文件流式传输到浏览器，请参阅Stack Overflow问题如何使用. NET 2.0将PDF文件作为二进制文件流式传输到浏览器-请注意，只要稍有变化，无论您是从文件系统提供文件还是动态生成的文件，这都应该有效。

话虽如此，引用的MSDN文章对世界的看法相当简单，因此您可能希望阅读通过HTTPS成功地流PDF到浏览器以及您可能需要提供的一些标题。

使用这种方法，ifram可能是最好的方法。有一个流式传输文件的网络表单，然后将ifram放在另一个页面上，其src属性设置为第一个表单。

查看此代码-将PDF嵌入超文本标记语言

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

您也可以为此目的使用Google PDF查看器。据我所知，这不是Google的官方功能（我错了吗？），但它对我来说非常好和流畅。您需要在某个地方上传您的PDF，只需使用其URL：

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

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

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

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

通过在查询字符串中传递一些选项，您确实可以控制PDF在浏览器中的显示方式。我很高兴这样做，直到我意识到它在IE8中不起作用。：（

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

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

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

这是快速，简单，到点，不需要任何第三方脚本：

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

更新（2/3/2021）

Adobe现在提供自己的PDF EmbedeAPI。

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

更新（1/2018）：

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

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

通过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（这反过来需要Ghost Script），这个选项在共享主机环境中可能不可用。还有一个PHP插件（称为Imagick）可以像这样工作，但它有自己的特殊要求。

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

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

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

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

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

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

   <div id="example1"></div>

2. Tell PDFObject which PDF to embed, and where to embed it

   <script src="/js/pdfobject.js"></script><script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>

3. You can optionally use CSS to specify visual styling, including dimensions, border, margins, etc.

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

source : https://pdfobject.com/

图片服务端PdfToImageServlet使用ImageMagick的convert命令。

用法示例：<img src='/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf'>

如果您不想自己托管PDF.JS，可以尝试DocDroid。它类似于Google Drive PDF查看器，但允许自定义品牌。

我发现这工作得很好，浏览器在Firefox中处理它。我没有检查IE…

<script>window.location='url'</script>

我们的问题是，出于法律原因我们不允许将PDF临时存储在硬盘上。此外，在浏览器中显示PDF作为预览时，不应重新加载整个页面。

首先我们尝试了PDF. jS。它在Firefox和Chrome的查看器中与Base64一起工作。然而，对于我们的PDF来说，它慢得令人无法接受。IE/Edge根本不起作用。

因此，我们尝试在超文本标记语言对象标记中使用Base64字符串。这同样不适用于IE/Edge（可能与PDF.js的问题相同）。在Chrome /Firefox/Safari也没问题。这就是我们选择混合解决方案的原因。Edge我们使用IFrame，对于所有其他浏览器使用对象标签。

当然，IFrame解决方案也适用于Chrome公司。我们没有将此解决方案用于Chrome的原因是，尽管PDF显示正确，Chrome在预览中单击“下载”后立即向服务器发出新请求。由于PDF以IFrame显示，因此不再设置所需的隐藏字段PDF助手传输数据（用于发送PDF生成所需的表单数据）。有关此功能/bug请参阅Chrome在下载PDF时发送两个请求（并取消其中一个）。

现在问题子IE9和IE10仍然存在。对于这些，我们放弃了预览解决方案，只需单击预览按钮将文档作为下载发送给用户（而不是预览）。我们已经尝试了很多，但即使我们找到了解决方案，这一小部分用户的额外努力也不值得付出努力。您可以在此处找到我们的下载解决方案：使用IFrame无需刷新即可下载PDF。

我们的Javascript：

var transferData = getFormAsJson()if (isMicrosoftBrowser()) {// Case IE / Edge (because doesn't recoginzie Pdf-Base64 use Iframe)var form = document.getElementById('pdf-helper-form');$("#pdfHelperTransferData").val(transferData);form.target = "iframe-pdf-shower";form.action = "serverSideFunctonWhichWritesPdfinResponse";form.submit();} else {// Case non IE use Object tag instead of iframe$.ajax({url: "serverSideFunctonWhichRetrivesPdfAsBase64",type: "post",data: { downloadHelperTransferData: transferData },success: function (result) {$("#object-pdf-shower").attr("data", result);}})}

我们的超文本标记语言：

<div id="pdf-helper-hidden-container" style="display:none"><form id="pdf-helper-form" method="post"><input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" /></form></div>
<div id="pdf-wrapper" class="modal-content"><iframe id="iframe-pdf-shower" name="iframe-pdf-shower"></iframe><object id="object-pdf-shower" type="application/pdf"></object></div>

要检查IE/Edge的浏览器类型，请参阅此处：如何使用JavaScript检测Internet Explorer（IE）和Microsoft Edge？我希望这些发现可以节省其他人的时间。

这是我处理AXIOS和Vue.js的方式：

        axios({url: `urltoPDFfile.pdf`,method: 'GET',headers: headers,responseType: 'blob'}).then((response) => {this.urlPdf = URL.createObjectURL(response.data)}).catch((error) => {console.log('ERROR   ', error)})

动态添加urlPDF到超文本标记语言：

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

1. 构造输入PDF字节的blob
2. 使用带有的ifram和PDF.js补丁解决方法

iFrame的URI应该看起来像这样：

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

现在FF、Chrome、IE 11和Edge都在通过URL中的标准blob URI传递的ifram中的查看器中显示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>

我必须使用React预览PDF，因此在尝试了几个库之后，我的最佳解决方案是获取数据并将其ebmed化。

const pdfBase64 = //fetched from url or generated with jspdf or other library
<embedsrc={pdfBase64}width="500"height="375"type="application/pdf"></embed>

只需将iFrame用于PDF。

我在我的React.js应用程序中有特定的需求，尝试了数百万个解决方案，但最终得到了一个iFrame：）祝你好运！

我发现为我的案例嵌入pdf的最佳方法是使用引导，因为它不仅显示pdf，而且还填充可用空间，您可以根据需要指定比率。这是我用它做的一个例子：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="embed-responsive embed-responsive-1by1"><iframe class="embed-responsive-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><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

之前我遇到了一个问题，因为URI限制，所以任何超过2MB的文件都无法在Chrome上正确呈现。

我的解决方案是：

1. 将uri编码转换为Blob：

2. 基于Blob生成临时DOM字符串。

   const blob = dataURItoBlob(this.dataUrl);

   var temp_url = window.URL.createObjectURL(blob);

3. 决定要将ifram附加到DOM的位置：

   const target = document.querySelector(targetID);

   target.innerHTML = `<iframe src='${temp_url}' type="application/pdf"></iframe>

如果您不想自己托管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>

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

更新-Adobe PDF EmbedeAPI

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

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

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

显示PDFfile_url

这是代码片段的示例，您可以将其添加到您的超文本标记语言中，并利用其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显示为缓冲区

这是代码片段的示例，如果您有缓冲区（例如本地文件），您可以将其添加到您的超文本标记语言中，并利用其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>

现代的“整页截图”服务或脚本现在能够生成完整的超文本标记语言和PDF页面的长截图，并将它们转换为JPG或PNG文件，然后可以嵌入为img元素。

我已经在其他地方回答了这个问题，但是，我在多个解决方案之间进行了评估。此外，如果您计划用于商业用途，这些可能会有所帮助：

免费解决方案

• ifram：只使用ifram，但是，这不是大多数人在这里搜索的。
• [Google Docs Preview]Google Docs有一个预览（在这里看到其他答案）
• Pdf.js是没有外部依赖的开源解决方案
• Adobe提供“免费”PDF EmbedeAPI-如果您对基于云的解决方案没意见，建议使用此方法。

商业供应商

• Pdf.js快递是Pdf.js的商业化扩展（表现最差的产品，不贵）
• PSPDFKit-来自奥地利的Provder，具有相当好的业务支持（中等价格，良好的产品）
• Foxit-中国公司也提供PDF网络解决方案。（最便宜的商业报价）
• PDFTron-PSDPDFkit的美国竞争对手（更昂贵但也不先进）

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