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

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

• iFrame
• 反对
• 嵌入

Adobe对此有何评论

---

在我的例子中，PDF是动态生成的，因此在刷新之前无法将其上载到第三方解决方案。

最好的方法可能是使用该库。它是PDF文档的纯/渲染器，没有任何第三方插件

在线演示：

GitHub：

将（其本身基于）与查看器相结合，以便您可以在服务器上实时转换和嵌入PDF文档

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

---

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

要将文件流式传输到浏览器，请参阅堆栈溢出问题-注意，尽管有一些小的变化，但无论您是从文件系统提供文件还是动态生成的文件，FDView都应该可以工作

尽管如此，引用的MSDN文章对世界的看法过于简单，因此您可能还需要阅读一些可能需要提供的标题

---

使用这种方法，iframe可能是最好的方法。让一个webform流式处理文件，然后将iframe放在另一个页面上，其

src

属性设置为第一个表单。

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

---

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

Scribd不再要求您在其服务器上托管文档。如果你用他们创建了一个帐户，这样你就可以得到一个发布者ID。只需要几行JavaScript代码就可以加载存储在你自己服务器上的PDF文件

---

有关更多详细信息，请参见。

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

它在Chrome9和Firefox3.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>

如果无法显示PDF，请在此处插入错误消息

这是一个快速、简单、切中要害且不需要任何第三方脚本的程序：

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

更新（2021年2月3日）

Adobe现在提供了自己的PDF嵌入API

更新（2018年1月）：

Android上的Chrome浏览器不再支持PDF嵌入。您可以使用Google Drive PDF viewer来解决这一问题

<embed src="https://drive.google.com/viewerng/
viewer?embedded=true&url=http://example.com/the.pdf" width="500" height="375">

---

通过ImageMagick将其转换为PNG，并显示PNG（快速和肮脏）

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

同时使用

和

将为您提供更广泛的浏览器兼容性

<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。请下载PDF以查看：

<代码> > P>您应该考虑的选项之一是<>强PDF <强> BR>
它有一个免费的计划，除非你计划在PDF上进行实时在线协作

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

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




创建一个容器来存放您的PDF

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



告诉要嵌入的PDF，以及在何处嵌入

<script src="/js/pdfobject.js"></script>
<script>PDFObject.embed("/pdf/sample-3pp.pdf", "#example1");</script>


PDFObject.embed（“/pdf/sample-3pp.pdf”，“示例1”）；

您可以选择使用CSS来指定视觉样式，包括尺寸、边框、边距等

<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>


.pdfobject容器{高度：500px；}
.pdfobject{border:1px solid#666；}

来源：
使用ImageMagick的
convert
命令

用法示例：
如果你不想自己托管PDF.JS，你可以尝试。它类似于Google Drive PDF viewer，但允许自定义品牌。
我发现它工作正常，浏览器在firefox中可以处理。我没有检查IE

<script>window.location='url'</script>

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

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

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


IFrame解决方案当然也适用于Chrome and co。我们没有在Chrome上使用此解决方案的原因是，尽管PDF显示正确，Chrome会向服务器发出新的请求
<style>
.pdfobject-container { height: 500px;}
.pdfobject { border: 1px solid #666; }
</style>

<script>window.location='url'</script>

        axios({
            url: `urltoPDFfile.pdf`,
            method: 'GET',
            headers: headers,
            responseType: 'blob'
        })
        .then((response) => {
            this.urlPdf = URL.createObjectURL(response.data)
        })
        .catch((error) => {
            console.log('ERROR   ', error)
        })

<object width='100%' height='600px' :data='urlPdf' type='application/pdf'></object>

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

<embed src="example.pdf" width="1000" height="800" frameborder="0" allowfullscreen>

<iframe src="example.pdf" style="width:1000px; height:800px;" frameborder="0" allowfullscreen></iframe>

const pdfBase64 = //fetched from url or generated with jspdf or other library

  <embed
    src={pdfBase64}
    width="500"
    height="375"
    type="application/pdf"
  ></embed>

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