html - title提示 - iframe展示pdf




推荐将PDF嵌入到HTML中的方法? (12)

  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/https://pdfobject.com/

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

  • 的iFrame?
  • 目的?
  • 嵌入?

Adobe对此有何看法?

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


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

有关更多详细信息,请参阅Developer Tools


PdfToImageServlet使用ImageMagick的convert命令。

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


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

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


您也可以为此使用Google PDF查看器。 据我所知,这不是一个官方的谷歌功能(我对此有错误吗?),但它对我来说非常好,很顺利。 您需要在以前的某处上传您的PDF,并使用其网址:

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


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

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

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

我们面临的问题是,由于法律原因,我们无法保存任何数据。 因此,我们需要使用流和类似工具,而不将PDF保存到Filesystem。 出于多种原因,下载或显示PDF文件时,页面不应该重新加载。

首先,我们使用了PDF.JS,因为@lubos hasko的建议:我们成功地将Base64与查看器一起使用。 这在Firefox和Chrome中起作用。 但无论如何非常缓慢。 IE / Edge并没有为我们工作。

在Microsoft浏览器(IE / Edge)中,我们无法在对象标签中显示PDF-Base64字符串,但在Chrome / Firefox / Safari中显示效果不错。 对于IE11 / Edge,我们因此使用IFrame来显示PDF流。 它运行良好,维护工作量保持在限制范围内。 对于IE9 / IE10,我们只是将文件作为下载流发送,因为这些浏览器与iframe结合使用效果不佳。 用户无法在模式框预览中显示PDF,这对于使用这些浏览器的用户数量(1%左右)来说是可以接受的。 你可以在这里找到我们的下载解决方案: 下载PDF格式而不用IFrame刷新 。

我们不在所有浏览器中使用IFrame解决方案的原因是,虽然PDF在我们所有经过测试的浏览器中都能正确显示,但只要您希望在Chrome浏览器中下载PDF,Chrome就会向服务器功能发出另一个请求, PDF阅读器。 隐藏字段pdfHelperTransferData不再设置,因为PDF显示在IFrame中,所以服务器端函数中的参数为 。 对于此“功能/错误”,请参阅此Chrome在下载PDF时发送两个请求(并取消其中一个请求)

我们的Javascript

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>

要检查Microsoft浏览器,请参阅实例: 如何使用JavaScript检测Internet Explorer(IE)和Microsoft Edge? 我希望这些发现能够在一段时间内拯救别人。


查看这段代码 - 将HTML嵌入到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>

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

这就是说,引用的MSDN文章采用了一个相当简单的世界视图,因此您可能希望通过HTTPS成功将PDF流式传输到浏览器 ,以及您可能需要提供的一些头文件。

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


通过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是否只有一两页,这是一个不错的选择。 当然,您需要在您的网络服务器上安装ImageMagick(这反过来需要Ghostscript),这个选项可能在共享主机环境中不可用。 还有一个PHP插件(称为imagick),它可以像这样工作,但它有它自己的特殊要求。


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




pdf