推荐将PDF嵌入到HTML中的方法？

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

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

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

这样做快速、简单、到位，不需要任何第三方脚本。

更新(1/2018)：。

Android上的Chrome浏览器不再支持PDF嵌入。 你可以通过使用Google Drive PDF查看器来解决这个问题。

你也可以使用谷歌的PDF浏览器的目的。 据我所知，它'不是一个官方的谷歌功能（我错了吗？），但它为我工作非常好，顺利。 你需要上传你的PDF之前的地方，只是使用它的URL。

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

你确实有一些控制如何在浏览器中出现的PDF通过传递一些选项的查询字符串。 我很高兴这个工作，直到我意识到它不工作在IE8。 :(

它在Chrome 9和Firefox 3.6中工作，但在IE8中，它显示的消息"插入你的错误信息在这里，如果PDF不能被显示.&quot。

我还没有'测试旧版本的任何上述浏览器，虽然。 但这里'的代码，我有反正，以防它帮助任何人。 这将缩放设置为85%，删除滚动条、工具栏和导航窗格。 如果在IE中也能使用，我会更新我的帖子。

    <p>Insert your error message here, if the PDF cannot be displayed.</p>

同时使用" "和" "将给你提供更广泛的浏览器兼容性。

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

通过ImageMagick将其转换为PNG，并显示PNG（快速且肮脏）。

<?php
  $dir = '/absolute/path/to/my/directory/';
  $name = 'myPDF.pdf';
  exec("/bin/convert $dir$name $dir$name.png");
  print '';
?>

如果你需要一个快速的解决方案，想要避免跨浏览器的PDF浏览问题，并且如果PDF只有一两页，这是一个不错的选择。 当然，你需要在你的网络服务器上安装ImageMagick（这反过来又需要Ghostscript），这个选项在共享主机环境中可能无法使用。 也有一个PHP插件（称为imagick），工作[像这样]（http://www.php.net/manual/en/imagick.examples-1.php），但它有自己的特殊要求。

看看这个代码--在HTML中嵌入PDF文件

    <a href="YourFile.pdf">shree</a> 

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

xpdf不是一个完美的PDF转换器。如果你需要更好的结果，那么Ghostview有一些能力将PDF文档转换成其他格式，你可能会更容易建立一个Flash浏览器。

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

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

首先，我们尝试了PDF.js。 它在Firefox和Chrome浏览器的查看器中与Base64一起工作。 然而，它对我们的PDF是不可接受的慢。 IE/Edge根本没有工作。

因此，我们尝试在 HTML 对象标签中使用 Base64 字符串。 这对IE/Edge来说也是不行的（也许和PDF.js的问题一样）。 在Chrome/Firefox/Safari中也没有问题。 这就是为什么我们选择了一个混合解决方案。 在IE/Edge中，我们使用IFrame，而对于所有其他浏览器，则使用对象标签。
<br/&gt。 IFrame解决方案当然也适用于Chrome等浏览器。 我们之所以没有在 Chrome 浏览器上使用这个解决方案，是因为虽然 PDF 正确显示，但只要你点击预览中的 "下载&quot，Chrome 就会向服务器发出新的请求。 就会向服务器发出新的请求。 所需的隐藏字段pdfHelperTransferData（用于发送生成PDF所需的表单数据）不再被设置，因为PDF是在一个IFrame中显示的。 关于这个功能/bug，请看https://stackoverflow.com/questions/32725608/chrome-sends-two-requests-when-downloading-a-pdf-and-cancels-one-of-them。

现在，问题儿童IE9和IE10仍然存在。 对于这些问题，我们放弃了预览解决方案，只是通过点击预览按钮将文档作为下载发送给用户（而不是预览）。 我们已经尝试了很多，但即使我们找到了解决方案，为了这一小部分用户的额外努力也是不值得的。 你可以在这里找到我们的下载解决方案。 [用IFrame下载不刷新的PDF][1]。

我们的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);
            }
        })
 }

我们的HTML。

<div id="pdf-helper-hidden-container" style="display:none">

        <input type="hidden" name="pdfHelperTransferData" id="pdfHelperTransferData" />

</div>

<div id="pdf-wrapper" class="modal-content">


</div>

要检查IE/Edge的浏览器类型请看这里。 [如何使用JavaScript检测Internet Explorer(IE)和Microsoft Edge？][2]希望这些发现能给别人节省时间。

[1]: https://stackoverflow.com/a/46843185/7302498 [2]: https://stackoverflow.com/a/31757969/7302498

1. 创建一个容器来容纳你的PDF

2. 告诉[PDFObject][1]要嵌入哪个PDF，以及嵌入的位置。

Scribd 不再要求您在他们的服务器上托管文件。 如果你在他们那里创建了一个账户，你就会得到一个出版商ID。 只需要几行JavaScript代码就可以加载存储在自己服务器上的PDF文件。

更多细节，请看开发者工具。

1:

你可以像这样使用保存的pdf的相对位置。

例1

例2

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

PdfToImageServlet][1] 使用ImageMagick'的convert命令。

使用示例。 <img src=&#39;/webAppDirectory/PdfToImageServlet?pdfFile=/usr/share/cups/data/default-testpage.pdf&#39;>。

[1]: https://github.com/pla1/Misc/blob/master/src/com/pla/misc/PdfToImageServlet.java

您应该考虑的选项之一是著名的PDF。 它有一个免费的计划，除非你打算做实时在线协作的PDF文件。

将以下iframe嵌入到任何html中并享受其结果。

要将文件流传到浏览器，请参见Stack Overflow问题如何使用.NET 2.0将PDF文件以二进制形式流传到浏览器--请注意，只要稍加改动，无论你是从文件系统中提供文件还是动态生成的文件，这都应该是有效的。

说到这里，MSDN的文章对这个世界的看法相当简单，所以你可能想读一下通过HTTPS成功地将PDF流向浏览器，以了解你可能需要提供的一些头信息。

使用这种方法，一个iframe可能是最好的方法。有一个流媒体文件的web表单，然后把iframe放在另一个页面，其src属性设置为第一个表单。

这是我用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到HTML中。

1. 构造一个输入的PDF字节的blob。

2. 使用iframe和PDF.js打上[此跨浏览器]补丁。 办法](https://stackoverflow.com/a/47395608/6620171)

iframe的URI应该是这样的。

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

现在，FF、Chrome、IE 11和Edge都能在浏览器中通过标准blob URI传递的URL中的iframe中显示PDF。

如果你不想自己托管PDF.JS，你可以尝试DocDroid。 它是类似于谷歌驱动器的PDF浏览器，但允许自定义品牌。

1:

我发现这个工作就很好，浏览器在firefox中处理。 我没有检查过IE...

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