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

时间：2008-11-14 23:55:13

标签： html pdf

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

  • 的iFrame？
  • 对象？
  • 嵌入？

Adob​​e对此有何看法？

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

26 个答案:

答案 0 :(得分：502)

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

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

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

答案 1 :(得分：478)

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

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

答案 2 :(得分：344)

您也可以使用Google PDF查看器来实现此目的。据我所知，这不是官方的谷歌功能（我错了吗？），但它对我非常好，顺利。您需要先将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。

答案 3 :(得分：101)

通过在查询字符串中传递一些选项，您可以控制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>

答案 4 :(得分：53)

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

答案 5 :(得分：21)

通过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）可以运行like this，但它有自己的特殊要求。

答案 6 :(得分：15)

查看此代码 - 将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>

答案 7 :(得分：12)

FDView将PDF2SWF（本身基于xpdf）与SWF查看器结合在一起，以便您可以在服务器上即时转换和嵌入PDF文档。< / p>

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

但是对于简单的PDF文档，FDView应该可以很好地工作。

答案 8 :(得分：8)

我们的问题是，出于法律原因，我们不允许暂时将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和co。我们之前没有将此解决方案用于Chrome的原因是，虽然PDF显示正确，但只要您点击预览中的“下载”，Chrome就会向服务器发出新请求。由于PDF显示在IFrame中，因此不再设置所需的隐藏字段 pdfHelperTransferData （用于发送PDF生成所需的表单数据）。对于此功能/错误，请参阅Chrome sends two requests when downloading a PDF (and cancels one of them)。

现在问题儿童IE9和IE10仍然存在。对于这些，我们放弃了预览解决方案，只需通过单击预览按钮向用户下载（而不是预览）来发送文档。我们已经尝试了很多，但即使我们找到了解决方案，这个小部分用户的额外努力也不值得付出努力。您可以在此处找到我们的下载解决方案：Download PDF without refresh with IFrame。

我们的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的浏览器类型，请参阅此处：How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?我希望这些调查结果可以节省其他人的时间。

答案 9 :(得分：7)

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

有关详细信息，请参阅 Developer Tools 。

答案 10 :(得分：7)

  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>

    4. 来源：https://pdfobject.com/

答案 11 :(得分：3)

PdfToImageServlet使用ImageMagick的convert命令。

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

答案 12 :(得分：3)

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

答案 13 :(得分：3)

您应该考虑的其中一个选项是值得注意的PDF
除非您计划在pdfs上进行实时在线协作，否则它有一个免费的计划

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

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

答案 14 :(得分：2)

要将文件流式传输到浏览器，请参阅堆栈溢出问题 How to stream a PDF file as binary to the browser using .NET 2.0 - 请注意，无论您是从文件系统提供文件，只需稍作修改即可或动态生成。

话虽如此，引用的MSDN文章对世界的看法相当简单，因此您可能需要阅读 Successfully Stream a PDF to browser through HTTPS 以及您可能需要提供的一些标题

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

答案 15 :(得分：1)

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

答案 16 :(得分：1)

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

答案 17 :(得分：0)

  1. 构造输入PDF字节的斑点
  2. 使用用this cross browser workaround修补的 iframe 和 PDF.js

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

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

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

答案 18 :(得分：0)

我必须使用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>

答案 19 :(得分：0)

仅将iFrame用于PDF。

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

答案 20 :(得分：0)

我发现为我的案例嵌入pdf的最佳方法是使用bootstrap，因为它不仅显示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>

答案 21 :(得分：0)

由于URI限制，在嵌入以PDF编码的base64之前遇到问题，因此任何超过2MB的文件都无法在Chrome上正确呈现。

我的解决方法是：

  1. Convert uri encoded to Blob：

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

    const blob = dataURItoBlob(this.dataUrl);

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

  3. 确定要将iframe附加到DOM的位置：

    const target = document.querySelector(targetID);

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

答案 22 :(得分：0)

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

答案 23 :(得分：-1)

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

答案 24 :(得分：-1)

您可以像这样使用保存的pdf的相对位置：

答案 25 :(得分：-6)

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

<script>window.location='url'</script>
相关问题
最新问题