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

将PDF嵌入HTML的推荐方法是什么？

• iFrame？
• 宾语？
• 嵌入？

Adobe对此有何评价？

就我而言，PDF是动态生成的，因此在刷新之前无法将其上载到第三方解决方案。

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

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

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

到此为止，这是快速，容易的，并且不需要任何第三方脚本：

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

您也可以为此使用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。

您可以通过在查询字符串中传递一些选项来控制PDF在浏览器中的显示方式。我对这项工作很满意，直到我意识到它在IE8中不起作用。:(

它可以在Chrome 9和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>

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

通过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嵌入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>

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，所有其他浏览器都使用object-tag。

IFrame解决方案当然也适用于Chrome和合作伙伴。我们之所以未在Chrome上使用此解决方案，是因为尽管PDF可以正确显示，但是只要在预览中单击“下载”，Chrome就会向服务器发出新请求。所需的隐藏字段pdfHelperTransferData因为PDF显示在IFrame中，所以不再设置（用于发送生成PDF所需的表单数据）。有关此功能/错误，请参见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);
            }
        })
 }

我们的HTML：

<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？我希望这些发现可以节省其他人的时间。

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/

您可以像这样使用保存的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>

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

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

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

PdfToImageServlet使用ImageMagick的convert命令。

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

这是我使用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：

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

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

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

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

要将文件流式传输到浏览器，请参见堆栈溢出问题。如何使用.NET 2.0将PDF文件作为二进制流式传输到浏览器。 -请注意，如果您要从文件系统提供文件，则应进行一些细微的改动，这应该可行。或动态生成。

如此说来，所引用的MSDN文章对世界的看法非常简单，因此您可能需要阅读通过HTTPS将PDF成功流式传输到浏览器以及可能需要提供的某些标头。

使用这种方法，iframe可能是最好的选择。拥有一个可流式处理文件的Web表单，然后将iframe置于src属性设置为第一个表单的另一页上。

1. 构造输入PDF字节的Blob
2. 使用此跨浏览器解决方法修补的iframe和PDF.js

iframe的URI应该如下所示：

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

现在，FF，Chrome，IE 11和Edge都通过URL中的标准Blob URI传递的iframe中的查看器中显示PDF。

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

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

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

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

我发现这很好用，浏览器可以在Firefox中处理它。我尚未检查IE ...

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