20 题: 在HTML中嵌入PDF的推荐方法?

在...创建的问题 Sat, Oct 6, 2012 12:00 AM

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

  • 的iFrame?
  • 对象?
  • 嵌入?

Adob​​e对此有何看法?

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

    
1083
  1. 2013-05-10 09:20:38Z
  2. 不仅对特定解决方案进行了很好的比较,而且还有一般策略,。此外,虽然我还没有尝试过,似乎是一个维护的分叉。
    2019-04-23 19:51:03Z
  3. 醇>
    20答案                              20 跨度>                         

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

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

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

        
    505
    2012-06-10 12:57:50Z
    1. 如另一个答案中所述,scribd实际上使用pdf2swf来转换pdf文件
      2009-11-04 09:14:12Z
    2. 我强烈建议不要使用scribd - 我刚刚对特定文档进行了实验,而在firefox 4中它只显示前3页,而在IE9中它的渲染文本错误 - 它偏移了页面的某些部分。从技术上讲,它是错误的。此外,他们希望您订阅打印或下载文档!基本上他们正在获取以前免费的文件并在他们周围架设付费墙。
      2011-05-01 19:15:29Z
    3. PDF.js库实际上看起来是一个非常好的解决方案,虽然链接的演示没有显示它嵌入页面(它占用了整个页面)。但它使用HMTL5画布,因此它应该很容易嵌入,并且它是快速。在不利方面,需要使用一些js,与<object>不同: github.com/mozilla/pdf.js/blob/master/examples/helloworld/...
      2012-10-11 16:25:06Z
    4. pdf.js在平板电脑浏览器(如Chrome)上效果不佳。对于较大的pdf文档,我也发现它非常非常慢。
      2013-08-05 20:53:59Z
    5. 我不相信这是推荐的。看一下在线演示中的字体渲染,它们看起来很麻烦,很糟糕。在adobe reader中打开时,使用子像素渲染效果会更好。
      2014-02-06 07:11:21Z
    6. 醇>

    这是快速,简单,重点,不需要任何第三方脚本:

     
    <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">
    
        
    484
    2019-01-16 09:49:09Z
    1. 最好使用&lt; object&gt;标记,以便您可以包含后备。
      2011-08-29 15:53:38Z
    2. 嗯,为了什么?它适用于FF,Chrome和IE 7/8/9。
      2011-08-29 19:37:48Z
    3. 如果你想确保它会显示而不是自动下载pdf(因为它发生在我身上)将type='application/pdf'添加到embed标签
      2012-09-04 15:44:39Z
    4. 最好使用<object>标签,因为它可以在无法显示pdf的浏览器中显示备用内容。如果需要,甚至可以将<embed>标签放在<object>标签中。参考: stackoverflow.com/questions/1244788/embed-vs-object
      2012-09-11 16:05:14Z
    5. 它需要adobe reader插件才能查看PDF ..
      2012-12-05 09:29:25Z
    6. 醇>

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

        
    345
    2012-03-22 00:03:45Z
    1. 应该提到的一件事是,可以显示的PDF大小有一个上限。我认为它目前是10MB /100页。 PS:我不认为观众是“非官方的”;他们甚至还有一个为您构建嵌入网址的操作方法页面: docs.google.com/viewer
      2011-04-29 16:26:04Z
    2. 此选项效果很好,但您必须公开访问PDF,这对我来说并不总是一种选择。
      2012-08-19 07:19:54Z
    3. @ RonSmith,它不再需要登录..
      2012-11-21 10:47:34Z
    4. 您可以在public,sign-in requiredprivate之间设置任何Google文档的隐私。这绝对是一个官方功能,考虑到Google Docs上的任何文档都有embed选项。
      2013-04-06 00:44:11Z
    5. 应该提到的另一件事是“你最近提出了太多的请求”警告,这是一个限制。
      2013-06-25 14:16:46Z
    6. 醇>

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

    适用于Chrome 9和Firefox 3.6,但在IE8中,如果无法显示PDF,则会显示“在此处插入错误消息”消息。

    我还没有测试上述任何浏览器的旧版本。但这里是我的代码,以防万一它可以帮助任何人。这将缩放设置为85%,删除scrollbars,工具栏和导航窗格。如果我确实遇到过在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>
    
        
    102
    2018-08-17 07:59:53Z
    1. 这是最好的解决方案,因为它使用的是浏览器功能,而不是复杂的第三方解决方案。在所有现代浏览器(IE9,FF或Chrome)中,PDF应该很好地嵌入。对不起IE 6/7用户。他们必须升级。我们很久以前就停止支持这些浏览器了。 :(
      2013-02-14 00:55:38Z
    2. 不适用于我的移动平板电脑版Chrome ..FYI ...可惜,本来是一个快速修复。
      2013-08-05 19:26:09Z
    3. + 1用于解决缩放和滚动选项,但是,这在最新的Chrome版本中无效(44)...无法加载PDF文档。
      2015-08-05 18:26:40Z
    4. 可以添加关闭按钮吗?怎么样?
      2016-11-20 13:07:12Z
    5. @ RoccoTheTaco Seconded,在Android上的移动Chrome上不起作用
      2018-01-30 17:23:03Z
    6. 醇>

    同时使用<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>
    
        
    54
    2017-08-08 10:55:17Z
    1. 如果pdf插件未安装或过期,则无法在浏览器中使用
      2014-12-09 06:37:24Z
    2. 此外,这不会验证那些与代码验证有关的内容。
      2015-08-05 18:22:54Z
    3. 这对我很有用,而使用embed标签本身被Chrome和Firefox视为unsafe
      2017-10-19 21:44:51Z
    4. 由于某些原因在Android(chrome)上它没有嵌入PDF而是提供下载它。在iPhone(safari)上,它只显示PDF的第一页。
      2018-02-22 15:01:22Z
    5. 醇>

    通过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)可以用于这样但它有自己的特殊要求。

        
    20
    2014-07-11 12:09:06Z
    1. 或者使用应用程序将图像转换为PNG,例如在Mac上预览。
      2012-09-05 18:19:47Z
    2. 但是你能以编程方式做到吗?
      2012-09-21 21:55:00Z
    3. 如果文档有多个页面怎么办?我想你只会展示冷杉t页然后
      2014-11-10 13:49:54Z
    4. @ seb已经有一段时间但是我能够在2或3页长的PDF上使用它。我认为移动浏览器难以显示这样的图像,这不是明智的做法。这就是为什么我称之为“快速而肮脏”的方法,但只要PDF不超过几页,我认为这是一个很好的方法。
      2014-11-21 22:33:59Z
    5. 如果您使用zend库打开PDF,那么您可以执行foreach($pdf->pages as $page)并为每个页面创建一个图像
      2016-10-04 15:04:18Z
    6. 醇>

    查看此代码 - 将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>
    
        
    16
    2015-08-05 18:21:37Z
    1. 这似乎不起作用。我总是以灰色屏幕而不是pdf结束。但是像src那样切换data,就像在@ Gayle的回答中一样,确实有效。
      2011-10-21 14:07:31Z
    2. 我使用的是Chrome 44,但它不起作用。我也尝试将数据切换到src。
      2015-08-05 18:19:42Z
    3. 对象是HTML 5,你使用的是正确的doctype吗?
      2016-01-12 21:48:20Z
    4. type =“application /pdf”解决了这个问题。在chrome中工作正常。
      2018-10-27 15:10:09Z
    5. 醇>

    FDView 结合了 PDF2SWF (本身基于 xpdf )使用 SWF 查看器,以便您可以转换和嵌入PDF文档苍蝇在您的服务器上。

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

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

        
    12
    2012-06-10 13:04:10Z
    1. FDView在其他任何地方都可用吗? code4net.com似乎已经消失了。
      2011-08-30 16:18:06Z
    2. @ Michael不是我能轻易找到的。我会把这个答案留给有人在其他地方重新主持fdview的机会。
      2011-09-02 16:09:35Z
    3. 醇>

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

    首先我们尝试了PDF.jS.它适用于Firefox和Chrome浏览器中的Base64。但是,我们的PDF格式慢得令人无法接受。 IE /Edge根本不起作用。

    因此,我们在HTML对象标记中使用Base64字符串进行了尝试。这再次对IE /Edge不起作用(可能与PDF.js相同)。在Chrome /Firefox /Safari中再次没问题。 这就是我们选择混合解决方案的原因。的 IE /埃德我们使用IFrame和所有其他浏览器使用object-tag。

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

    现在问题儿童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? 我希望这些调查结果可以节省其他人的时间。

        
    8
    2019-06-12 13:04:37Z
    1. 对不起,但我不明白,变量“transferData”有什么样的价值?
      2018-10-17 15:50:41Z
    2. 您好@Kate,在我们的例子中,我们根据用户在网络表单中的输入生成PDF。 “transferData”包含作为JSON发送到Web API中的PDF生成函数的数据。我添加了一行代码以便澄清。
      2018-10-18 07:56:14Z
    3. 醇>

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

    有关详细信息,请参阅 开发人员工具

        
    7
    2012-06-10 13:15:49Z
    1. 你能发布另一个链接,显示这是如何完成的吗?从您发布的链接中不清楚。
      2011-04-29 16:41:52Z
    2. 似乎已经更新了他们的网站并更改了此页面。我认为此页面包含我在原帖中提到的内容: scribd。 COM /开发者/API?METHOD_NAME = +的Javascript API
      2011-04-30 10:19:04Z
    3. 我希望我能不止一次地喜欢这个,它完美无缺。滚动到网站底部,然后点击API查看示例。
      2013-08-05 20:52:43Z
    4. 现在已关闭scribd注册。
      2015-09-23 08:11:02Z
    5. 醇>
    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/

          
    7
    2016-08-19 01:26:03Z
    1. 这是一个非常好的解决方案,与bootstrap样式配合使用效果很好。这一切都在其他bootstrap元素之上。
      2019-02-05 23:32:12Z
    2. 你试过blob文件吗?我在lib jspdf中使用了pdf.output('bloburl'),但它似乎无法在IE11上工作。
      2019-04-29 10:06:58Z
    3. 醇>

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

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

     
    <iframe width='1000' height='800' src='http://bit.ly/1JxrtjR' frameborder='0' allowfullscreen></iframe>
    
        
    3
    2015-05-19 23:32:26Z
     
    <object width="400" height="400" data="helloworld.pdf"></object>
    
        
    3
    2016-02-03 14:36:59Z

    使用ImageMagick PdfToImageServlet convert命令。

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

        
    3
    2017-02-23 20:09:02Z

    要将文件流式传输到浏览器,请参阅堆栈溢出问题 如何使用.NET 2.0将PDF文件作为二进制文件流式传输到浏览器 - 请注意,只要有微小的变化,无论你是否从文件系统提供文件或动态生成。

    话虽如此,引用的MSDN文章对世界的看法相当简单,所以你可能想要阅读 通过HTTPS成功将PDF流式传输到浏览器 以及您可能需要的一些标题供应。

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

        
    2
    2017-05-23 12:26:36Z
    1. @ downvoter谨慎解释为什么你要匿名低估10年前的答案?
      2018-07-17 13:46:32Z
    2. 醇>

    这是我使用 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>
    
        
    1
    2018-05-17 09:26:27Z
    1. 构造输入PDF字节的blob
    2. 使用此跨浏览器修补 iframe PDF.js 解决方法
    3. 醇>

      iframe的URI应如下所示:

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

      现在,FF,Chrome,IE 11和Edge都会在通过sta传递的iframe中的查看器中显示PDFURL中的ndard blob URI。

          
    0
    2018-07-18 13:23:08Z

    您可以使用保存的pdf的相对位置,如下所示:

        
    0
    2019-06-16 21:56:37Z

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

        
    - 1
    2017-09-18 16:03:34Z

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

     
    <script>window.location='url'</script>
    
        
    - 6
    2017-10-13 14:10:14Z
    1. 这应该实现的目标是什么?我看不出它是如何回答这个问题的。
      2018-09-06 11:08:33Z
    2. 当我在我的HTML中嵌入PDF时,我发现最好的方法是获得这个文档的链接。例如&lt; a href =“ server1.network/trifold_JonesChiro.pdf ”target ='_ blank'&gt ; Client Portal Trifold(示例)&lt; /a&gt;它有时是一个干净的答案打开一个页面并显示pdf vs tring将其放在html中。它还允许pdf在选项卡中保持打开状态。
      2018-09-07 15:27:24Z
    3. 所以你的建议是链接,而不是嵌入?这很好,但作为答案,这一点还不太清楚。
      2018-09-08 15:26:30Z
    4. 醇>
来源放置 这里