20

出于某种原因，iPad Safari 浏览器不能很好地处理嵌入的 PDF。PDF 在独立启动时可以自行查看，但不能使用对象标签。问题是它们不滚动。

我有一个带有嵌入式 pdf 的 jquery 页面，可以很好地在 mozilla 和 chrome 上滚动，但在 safari (iPad) 上，PDF 仍然停留在第一页上并且不可滚动。问题是，如何在 iPad 浏览器上进行这项工作？

此处发布了一个类似的问题，使嵌入式 PDF 在 iPad 中可滚动，但答案不是很好。他们通过使用 10000px 的高度来作弊，这为小文档创建了很多空白，并且可能不适用于非常大的文档：

<!DOCTYPE html>
<html>
  <head>
    <title>PDF frame scrolling test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style>
      #container { overflow: auto; -webkit-overflow-scrolling: touch; height: 500px; }
      object { width: 500px; height: 10000px }
    </style>
  </head>
  <body>
    <div id="container">
      <object id="obj" data="my.pdf" >object can't be rendered</object>
    </div>
  </body>
</html>

有什么方法可以在不硬编码疯狂高度的情况下完成这项工作？

4

8 回答 8

23

我多年来一直试图找到解决这个问题的方法。我会尽力拯救任何寻找它的人：这个问题没有解决方案。Safari 处理 PDF 呈现的方式与将 PDF 嵌入网页的整个概念完全冲突。此外，iPad 上的所有浏览器都需要使用 Safari 渲染引擎，因此您甚至无法指导用户安装其他浏览器。

嵌入具有良好结果的 PDF 的唯一方法是使用某种 3rd 方渲染实用程序。那里有一些 jQuery 解决方案，但出于我的目的，我发现最简单的方法是将 google 文档查看器链接嵌入到对象或 iframe 标记中。这相对简单，您可以在这里找到简单的说明：

如何在 iframe 中查看 Google Drive pdf 链接

该解决方案包括良好的显示渲染和简单的分页和缩放控制。如果将 &embedded=true 选项嵌入到 iframe 或对象标记中，请务必包含该选项，否则它将不起作用。查看器需要一个可公开访问的 url 到您的文档，因此如果您像我一样有安全问题，您将需要编写一个 Web 服务来从单一使用令牌提供文档。

如果您正在寻找更强大的东西，有一个很好的网页列出了其他几个选项：

http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

于 2013-12-12T20:47:26.293 回答
20

PDF.js 可能是正确的选择。它非常适合我们。

您只需从https://mozilla.github.io/pdf.js/下载它并将其放置在您的网站中。

然后它可以包含在 iframe 中

<iframe src="/web/viewer.html?file=PATH_TO_MY_FILE.PDF"></iframe>

可以在此处找到演示：https ://mozilla.github.io/pdf.js/web/viewer.html

问候

于 2015-09-11T08:24:19.387 回答
3

MSD 的回答非常准确。我一直在尝试以许多不同的方式来做到这一点，从建议的一些库到使用对象、嵌入元素等。

无论如何，它不会为我滚动（iPad air 2 和 air 1 至少在 iOS 8 上）。或者它以过度拉伸的字母滚动，或者仅适用于短 1-2 页的文档。

我发现最有效的解决方案是通过用户代理为 iPad 用户提供一个链接以直接访问该文件，他们将能够在选项卡中看到它并很好地滚动浏览它。它没有嵌入，但它是我能找到的最有效和最有效的解决方案，可以满足我当前的需求。

我希望它可以帮助有人钻研同样的事情

于 2015-06-05T14:08:12.463 回答
3

希望这可以在将来对其他人有所帮助。我使用谷歌的 pdf 查看器能够在 iframe 中滚动 pdf。所以在 src 标签上的 url 是

https://docs.google.com/gview?url= ' + '插入 PDF 链接' + Embedded=true

于 2019-09-12T07:23:59.943 回答
1

您不需要将对象的高度设置为疯狂的东西，只需将其设置为与容器元素相同的高度即可。要使用绝望的 Safari 渲染对象滚动，您需要使用两个手指（上/下和左/右）。

我还在容器元素中设置了以下属性：

overflow: scroll;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -webkit-box;

我无法做到的是让它填满容器的宽度，但至少你可以浏览文档。

于 2014-09-02T16:11:30.713 回答
0

你好我处理了同样的问题。在所有浏览器中，除了 safari 浏览器外，我嵌入 PDF 都没有问题。

我在此网页上找到了解决方案并为我工作 - https://www.labnol.org/embed-pdf-200208

<iframe frameborder="0" scrolling="no"
 width="640" height="480"
 src="https://drive.google.com/file/d/<<FILE_ID>>/preview">
于 2020-08-23T11:16:38.213 回答
0 
static downloadPdfChromeApp(linkSource: string) {
        // Crea un div y dentro un object para luego destruirlo y abrir una nueva ventana enviando la data
        const divpdf = document.createElement('div');
        divpdf.innerHTML = '<div style="display:none;position:absolute">' +
            '<object  style="display:none;" id="docuFrame" type="application/pdf" width="1px" height="1px" data="' +
            linkSource + '"></object></div>';
        document.firstElementChild.appendChild(divpdf);
        const frame = document.getElementById('docuFrame') as HTMLObjectElement;
        window.open(frame.data);
        divpdf.remove();
    }
于 2019-07-29T11:26:09.297 回答
0

如果您只想有选择地使用嵌入，另一种解决方案（无需编码）是使用 Google。

  1. 将您的 pdf 存储在您的 Google 云端硬盘中
  2. 用预览打开它。
  3. 从三个项目的子菜单中选择“在新窗口中打开”。
  4. 在新窗口的三个项目的子菜单中选择“嵌入项目”。
  5. 复制 iframe 代码并将其粘贴到您的页面中。

在这里您还可以找到详细说明，在第 12 点下您可以看到 iframe 代码。

示例，但在德语中

于 2019-01-16T05:52:15.760 回答