用ChatGPT解决这个技术问题 Extra ChatGPT

将 PDF 嵌入 HTML 的推荐方法？

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

框架？

目的？

嵌入？

Adobe 是怎么说的？

就我而言，PDF 是动态生成的，因此在刷新之前无法将其上传到第三方解决方案。

试试 pdf2htmlEX：github.com/coolwanglu/pdf2htmlEX
不仅对特定解决方案而且对一般策略进行了很好的比较，on the pdf2htmlEX repo's wiki。另外，虽然我没有尝试过，但 this 似乎是一个维护的分支。

B
Batfan

这快速、简单、切中要害，并且不需要任何第三方脚本： 

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

更新（2021 年 2 月 3 日）

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

https://www.adobe.io/apis/documentcloud/dcsdk/pdf-embed.html

更新（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">
最好使用 标记，以便您可以包含后备。
如果您想确保它会显示而不是自动下载 pdf（因为它发生在我身上）添加 type='application/pdf' 到嵌入标签
最好使用 <object> 标记，因为它可以在无法显示 pdf 的浏览器中显示替代内容。如果需要，甚至可以将 <embed> 标记放入 <object> 标记中。参考：stackoverflow.com/questions/1244788/embed-vs-object
@batfan，如果我认为这里提供的几乎所有解决方案都能解决在手机以外的屏幕上完美显示 PDF 文档的挑战，是否正确？我有一个嵌入了 PDF 的网页，它在计算机屏幕上运行良好，但在使用 Chrome 的安卓手机上却不行。请为此问题提供一些提示/解决方案。
@PKTG我刚刚测试了这个，它对我有用。见下文jsfiddle.net/196fv04s
b
bad_coder

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

在线演示：https://mozilla.github.io/pdf.js/web/viewer.html

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

如另一个答案所述，scribd 实际上使用 pdf2swf 来转换 pdf 文件
我强烈建议不要使用 scribd - 我刚刚对特定文档进行了实验，在 Firefox 4 中它只显示前 3 页，而在 IE9 中它的呈现文本错误 - 它偏移了页面的某些部分。所以从技术上讲，它是错误的。此外，他们希望您订阅打印或下载文档！从本质上讲，他们正在获取以前免费的文件并在它们周围建立收费墙。
PDF.js 库实际上看起来是一个非常好的解决方案，尽管链接的演示没有显示它嵌入在页面中（它占据了整个页面）。但是它使用 HMTL5 画布，所以应该很容易嵌入，而且它快。不利的一面是，它需要一些 js 才能使用，这与 <object> 不同：github.com/mozilla/pdf.js/blob/master/examples/helloworld/…
pdf.js 在 Chrome 等平板电脑浏览器上效果不佳。我还发现它对于较大的 pdf 文档非常非常慢。
@RoccoTheTaco 有什么高性能的替代品吗？
K
Kristian Glass

为此，您还可以使用 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。

应该提到的一件事是可以显示的 PDF 的大小有一个上限。我认为目前是 10MB/100 页。 PS：我不认为观众是“非官方的”；他们甚至有一个为您构建嵌入 URL 的操作指南页面：docs.google.com/viewer
这个选项效果很好，但你必须让你的 PDF 公开访问，这对我来说并不总是一个选项。
@riot_starter 这个解决方案不再有效，如果你完全退出谷歌它加载正常，如果你完全登录它加载正常，但是如果你介于两者之间（无论这意味着什么）它会要求你输入密码。在 iframe 的情况下，它只是不加载。
您可以在 public、sign-in required 和 private 之间设置任何 Google 文档的隐私。考虑到 Google Docs 上的任何文档都有 embed 选项，这绝对是一项官方功能。
另一个应该提到的是“你最近提出了太多请求”警告，这是一个限制。
M
Matthew Lock

您可以通过在查询字符串中传递一些选项来控制 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>
这是最好的解决方案，因为它使用的是浏览器功能，而不是复杂的第三方解决方案。在所有现代浏览器（IE9、FF 或 Chrome）中，PDF 都应该很好地嵌入。对不起 IE 6/7 用户。他们必须升级。我们很久以前就停止支持这些浏览器了。 :(
u
user643011

同时使用 <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 插件未安装或已过期，这将在浏览器中不起作用
此外，这不会验证那些与代码验证有关的人。
这对我来说非常有用，而 Chrome 和 Firefox 将单独使用 embed 标记视为 unsafe。
出于某种原因，在 Android (chrome) 上，它没有嵌入 PDF，而是提供下载它。在 iPhone (safari) 上，它只显示 PDF 的第一页。
5
5 revs, 5 users 52%

查看此代码 - 将 PDF 嵌入 HTML 

<!-- Embed PDF File -->
<object src="YourFile.pdf" type="application/pdf" title="SamplePdf" width="500" height="720">
    <a href="YourFile.pdf">shree</a> 
</object>
这似乎不起作用。我总是以空白的灰色屏幕而不是pdf结束。但是，正如@Gayle 的回答那样，将 src 切换为 data 确实有效。
我正在使用 Chrome 44，但它不起作用。我也尝试将数据切换到 src。
type="application/pdf" 解决了这个问题。在铬中工作正常。
包括 type="application/x-pdf" 现在实际上会阻止在 Chrome 和 FireFox 上呈现。它应该被删除。
P
Pang

通过 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，但它有自己的特殊要求。

或者使用应用程序将图像转换为 PNG，例如 Mac 上的 Preview。
但你能以编程方式做到这一点吗？
如果文档超过 1 页怎么办？我猜你只会显示第一页
@seb 已经有一段时间了，但我能够在 2 或 3 页长的 PDF 上使用它。比这大得多是不明智的，我认为移动浏览器很难显示这样的图像。这就是为什么我称它为“快速而肮脏”的方法，但我认为这是一个很好的方法，只要 PDF 不超过几页。
如果您使用 zend 库打开 PDF，那么您可以执行 foreach($pdf->pages as $page) 并为每个页面创建一个图像
B
Boken

您可以像这样使用保存的 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>
Chrome 知道嵌入就像 Flash，它会自动阻止它。带引导程序的 iFrame 是一个不错的选择。
P
Peter Mortensen

FDView 将 PDF2SWF（它本身基于 xpdf）与 SWF 查看器相结合，因此您可以在服务器上动态转换和嵌入 PDF 文档。

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

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

FDView 可以在其他任何地方使用吗？ code4net.com 似乎消失了。
@Michael不是我很容易找到的。如果有人在其他地方重新托管 fdview，我会留下这个答案。
A
Astrophage

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

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

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

IFrame 解决方案当然也适用于 Chrome 和 co。我们没有为 Chrome 使用此解决方案的原因是，虽然 PDF 显示正确，但 Chrome 会在您单击预览中的“下载”时立即向服务器发出新请求。不再设置所需的隐藏字段 pdfHelperTransferData（用于发送生成 PDF 所需的表单数据），因为 PDF 显示在 IFrame 中。有关此功能/错误，请参阅 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?我希望这些发现可以节省其他人的时间。

对不起，但我不明白，变量“transferData”有什么样的价值？
嗨@Kate，在我们的例子中，我们根据用户在我们的网络表单中的输入生成 PDF。 “transferData”包含以 JSON 格式发送到 Web API 中的 PDF 生成函数的数据。我添加了一行更多代码以进行澄清。
J
Jon Schneider

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

告诉 PDFObject 要嵌入哪个 PDF，以及在哪里嵌入它 您可以选择使用 CSS 指定视觉样式，包括尺寸、边框、边距等。

来源：https://pdfobject.com/

这是一个非常好的解决方案，并且与引导样式结合使用效果很好。这一切都建立在其他引导元素之上。
您是否尝试过使用 blob 文件？我将它与 lib jspdf 中的 pdf.output('bloburl') 一起使用，但它似乎不适用于 IE11。
这是一个很好的解决方案，但即使是最新的 iPhone safari 浏览器也无法使用 :(
P
Peter Mortensen

Scribd 不再要求您将文档托管在他们的服务器上。如果您与他们创建一个帐户，那么您将获得一个发布者 ID。只需几行 JavaScript 代码即可加载存储在您自己的服务器上的 PDF 文件。

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

您能否发布另一个链接来说明这是如何完成的？从您发布的链接中不清楚。
似乎他们已经更新了他们的网站并更改了此页面。我认为此页面包含我在原始帖子中所指的内容：scribd.com/developers/api?method_name=Javascript+API
我希望我能不止一次喜欢这个，它工作得很好。滚动到网站底部并单击 API 以查看示例。
现在已关闭注册以进行 scribd。
N
NeNaD

更新 - Adobe PDF 嵌入 API

Adobe 发布了完全免费的 Adobe PDF Embed API。因为他们自己创建了 PDF 格式，所以他们的 API 可能是最适合的。

它提供了可用的最高质量的 PDF 渲染。

您可以完全自定义用户体验并选择如何显示 PDF。

您还将对 PDF 的使用进行分析，以便了解用户如何与 PDF 交互，包括在页面上花费的时间和搜索。

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

通过 file_url 显示 PDF

下面是代码片段示例，您可以将其添加到 HTML 中，并利用他们的 API 通过 file_url 显示 PDF。您必须添加 { 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>
P
PLA

PdfToImageServlet 使用 ImageMagick 的 convert 命令。

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

D
Despertaweb

这就是我对 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>
D
Daryl H 
<object width="400" height="400" data="helloworld.pdf"></object>
P
Pecata

我不得不使用 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>
C
Community

要将文件流式传输到浏览器，请参阅 Stack Overflow 问题 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 可能是最好的方法。有一个流式传输文件的网络表单，然后将 iframe 放在另一个页面上，并将其 src 属性设置为第一个表单。

@downvoter 想解释一下为什么你匿名否决了一个 10 年前的答案？
G
George Pligoropoulos

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

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

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

构造一个输入 PDF 字节的 blob 使用一个 iframe 和 PDF.js 修补了这个跨浏览器解决方法

iframe 的 URI 应如下所示： 

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

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

M
Marc Partensky

我发现为我的案例嵌入 pdf 的最佳方法是使用 bootstrap，因为它不仅显示 pdf，而且还填充可用空间，您可以根据需要指定比率。这是我用它制作的一个例子：

T
Tony Bui

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

我的解决方案是：

将 uri 编码为 Blob：基于 Blob 生成临时 DOM 字符串。常量 blob = dataURItoBlob(this.dataUrl); var temp_url = window.URL.createObjectURL(blob);确定要将 iframe 附加到 DOM 的位置： const target = document.querySelector(targetID); target.innerHTML = `

r
raoof 
<embed src="data:application/pdf;base64,..."/>
m
monday

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

M
Maksym Koshyk

只需将 iFrame 用于 PDF。

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

B
Bob Singor

如果您不想自己托管 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>
K
KHAYRI R.R. WOULFE

现代“整页截图”服务或脚本现在能够生成完整 HTML 和 PDF 页面的长截图，并将它们转换为 JPG 或 PNG 文件，然后可以嵌入为 img 元素。

A
Aurasphere

我发现这工作得很好，浏览器在 Firefox 中处理它。我没有检查IE... 

<script>window.location='url'</script>
这应该达到什么目的？我看不出它是如何回答这个问题的。
当我在我的 HTML 中嵌入 PDF 时，我发现最好的方法是有一个指向该文档的链接。例如 <a href="server1.network/trifold_JonesChiro.pdf" target='_blank'>Client Portal Trifold (sample)</a>有时打开页面并显示 pdf vs 字符串以将其放置在 html 中是一个干净的答案。它还允许 pdf 在选项卡中保持打开状态。
所以你的建议是链接，而不是嵌入？这很好，但作为答案，这还不清楚。

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

友情链接

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.