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

Recommended way to embed PDF in HTML?

提问by Daniel Silveira

What is the recommended way to embed PDF in HTML?

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

• iFrame?
• Object?
• Embed?

• 框架？
• 目的？
• 嵌入？

What does Adobe say itself about it?

Adobe 对此有何评论？

In my case, the PDF is generated on the fly, so it can't be uploaded to a third-party solution prior to flushing it.

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

采纳答案by lubos hasko

Probably the best approach is to use the PDF.JSlibrary. It's a pure HTML5/JavaScriptrenderer for PDF documents without any third-party plugins.

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

Online demo: http://mozilla.github.com/pdf.js/web/viewer.html

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

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

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

回答by Batfan

This is quick, easy, to the point and doesn't require any third-party script:

这非常快速、简单，并且不需要任何第三方脚本：

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

UPDATE (1/2018):

更新（1/2018）：

The Chrome browser on Android no longer supports PDF embeds. You can get around this by using the Google Drive PDF viewer

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

回答by Lukasz Korzybski

You can also use Google PDF viewer for this purpose. As far as I know it's not an official Google feature (am I wrong on this?), but it works for me very nicely and smoothly. You need to upload your PDF somewhere before and just use its URL:

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

What is important is that it doesn't need a Flash player, it uses JavaScript.

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

回答by Gayle

You do have some control over how the PDF appears in the browser by passing some options in the query string. I was happy to this working, until I realized it does not work in IE8. :(

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

It works in Chrome 9 and Firefox 3.6, but in IE8 it shows the message "Insert your error message here, if the PDF cannot be displayed."

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

I haven't yet tested older versions of any of the above browsers, though. But here's the code I have anyway in case it helps anyone. This sets the zoom to 85%, removes scrollbars, toolbars and nav panes. I'll update my post if I do come across something that works in IE as well.

不过，我还没有测试过上述任何浏览器的旧版本。但无论如何，这是我拥有的代码，以防它对任何人有帮助。这会将缩放设置为 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>

回答by Suneel Kumar

Using both <object>and <embed>will give you a wider breadth of browser compatibility.

使用两者<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>

回答by Dan Mantyla

Convert it to PNG via ImageMagick, and display the PNG (quick and dirty).

通过 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" />';
?>

This is a good option if you need a quick solution, want to avoid cross-browser PDF viewing problems, and if the PDF is only a page or two. Of course, you need ImageMagick installed (which in turn needs Ghostscript) on your webserver, an option that might not be available in shared hosting environments. There is also a PHP plugin (called imagick) that works like thisbut it has it's own special requirements.

如果您需要快速解决方案、想要避免跨浏览器的 PDF 查看问题，并且 PDF 只有一两页，那么这是一个不错的选择。当然，您需要在您的网络服务器上安装 ImageMagick（反过来需要 Ghostscript），这个选项在共享主机环境中可能不可用。还有一个 PHP 插件（称为 imagick）可以像这样工作，但它有自己的特殊要求。

回答by amIT

Have a look for this code- To embed the PDF in HTML

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

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

回答by Adam Davis

FDViewcombines PDF2SWF(which itself is based on xpdf) with an SWFviewer so you can convert and embed PDF documents on the fly on your server.

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

xpdf is not a perfect PDF converter. If you need better results then Ghostviewhas some ability to convert PDF documents into other formats which you may be able to more easily build a Flash viewer for.

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

But for simple PDF documents, FDView should work reasonably well.

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

回答by George Maharis

Our problem is that for legal reasons we are not allowed to temporarily store a PDF on the hard disk. In addition, the entire page should not be reloaded when displaying a PDF as Preview in the Browser.

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

First we tried PDF.jS. It worked with Base64 in the viewer for Firefox and Chrome. However, it was unacceptably slow for our PDF. IE/Edge didn't work at all.

首先我们尝试了 PDF.jS。它与 Firefox 和 Chrome 浏览器中的 Base64 一起使用。但是，对于我们的 PDF 来说，速度慢得令人无法接受。IE/Edge 根本不起作用。

We therefore tried it with a Base64 string in an HTML object tag. This again didn't work for IE/Edge (maybe the same problem as with PDF.js). In Chrome/Firefox/Safari again no problem. That's why we chose a hybrid solution. IE/Edge we use an IFrame and for all other browsers the object-tag.

The IFrame solution would of course also work for Chrome and co. The reason why we didn't use this solution for Chrome is that although the PDF is displayed correctly, Chrome makes a new request to the server as soon as you click on "download" in the preview. The required hidden-field pdfHelperTransferData(for sending our form data needed for PDF generation) is no longer set because the PDF is displayed in an IFrame. For this feature/bug see Chrome sends two requests when downloading a PDF (and cancels one of them).

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

IFrame 解决方案当然也适用于 Chrome 和 co。我们没有对 Chrome 使用此解决方案的原因是，尽管 PDF 显示正确，但只要您在预览中单击“下载”，Chrome 就会向服务器发出新请求。不再设置所需的隐藏字段pdfHelperTransferData（用于发送 PDF 生成所需的表单数据），因为 PDF 显示在 IFrame 中。有关此功能/错误，请参阅Chrome 在下载 PDF 时发送两个请求（并取消其中一个）。

Now the problem children IE9 and IE10 remain. For these we gave up a preview solution and simply send the document by clicking the preview button as a download to the user (instead of the preview). We have tried a lot but even if we had found a solution the extra effort for this tiny part of users would not have been worth the effort. You can find our solution for the download here: Download PDF without refresh with IFrame.

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

Our Javascript:

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

Our HTML:

我们的 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>

To check the browser type for IE/Edge see here: How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?I hope these findings will save someone else the time.

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

回答by Said Bouigherdaine

1. Create a container to hold your PDF

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

2. Tell PDFObjectwhich 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>
   

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>
   

source : https://pdfobject.com/

来源：https: //pdfobject.com/