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

Question

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

• 的iFrame？
• 宾语？
• 嵌入？

Adobe对此有何看法？

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

Answer 1

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

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

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

Answer 2

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

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

更新(1/2018):

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

通过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)就像这样工作,但它有自己的特殊要求.

Answer 7

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

Answer 8

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

Answer 9

FDView将PDF2SWF(它本身基于xpdf)与SWF查看器结合在一起,因此您可以在服务器上即时转换和嵌入PDF文档.

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

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

Answer 10

我们的问题是,出于法律原因,我们不允许在硬盘上临时存储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会在下载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？我希望这些发现可以节省别人的时间.

Answer 11

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/

Answer 12

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

有关详细信息,请参阅开发者工具.

Answer 13

更新 - Adob​​e PDF 嵌入 API

Adobe 发布了完全免费的Adob​​e PDF Embed API 。由于他们自己创建了 PDF 格式，因此他们的 API 可能是最适合此目的的。

• 它提供最高质量的 PDF 渲染。
• 您可以完全自定义用户体验并选择如何显示 PDF。
• 您还将对 PDF 使用情况进行分析，以便了解用户如何与 PDF 交互，包括在页面上花费的时间和搜索的时间。

您所要做的就是创建一个api_key并在代码片段中使用它。

显示 PDF 通过file_url

下面是代码片段的示例，您可以将其添加到 HTML 中并利用其 API 通过file_url. 您必须添加{ location: { url: "url_of_the_pdf" } }配置。

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { location: { url: "url_of_the_pdf" } },
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

将 PDF 显示为缓冲区

下面是代码片段的示例，如果您有缓冲区（例如本地文件），您可以将其添加到 HTML 中并利用其 API 来显示 PDF。您必须添加{ promise: <FILE_PROMISE> }配置。

<div id="adobe-dc-view"></div>

<script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>

<script type="text/javascript">
  document.addEventListener("adobe_dc_view_sdk.ready", function(){
    var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
    adobeDCView.previewFile({
      content: { promise: <FILE_PROMISE> }
      metaData: { fileName: "file_name_to_display" }
    }, {});
  });
</script>

Answer 14

PdfToImageServlet使用 ImageMagick 的convert命令。

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

Answer 15

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