使嵌入的 PDF 在 iPad 中可滚动答案

【问题标题】：Make embedded PDF scrollable in iPad使嵌入的 PDF 在 iPad 中可滚动
【发布时间】：2013-03-29 02:02:27
【问题描述】：

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

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

在这里Making embedded PDF scrollable in 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>

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

【问题讨论】：

PDF 是嵌入在应用程序中还是从服务器查看？也就是说，您是否有理由需要在 UIWebView 或 Mobile Safari 中显示 PDF？
PDF 在服务器上。最终，PDF 将在服务器上动态更新，无论它们是什么形状或大小，应用程序都会显示它们。应用程序的其余部分在 jquery 中完成，ipad 是我们用户的偏好。现在我正在将 PDF 启动到一个新的浏览器窗口，因为它可以工作，但理想情况下我想将它们嵌入到页面中，这样它们就不必离开了。
没有原生应用？
不，只是一个网站--html 5 + jquery
我面临同样的问题，我不想使用 PDF.js，因为它太复杂了。我只想在 iPad 中使用对象标签显示 PDF，因为它也适用于所有其他浏览器。有cmets吗？

标签： jquery html ipad pdf

【解决方案1】：

您好，我也遇到了同样的问题。除了 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">

【讨论】：

【解决方案2】：

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

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

【讨论】：

谢谢，这是最好的答案。虽然我在第一次加载时遇到了一些问题。所以我将它两次加载到文档中。
@Doctore 我绑定了这个，但没有可用的预览，有时会出现 400 错误

【解决方案3】：

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();
    }

【讨论】：

嗨@andres。您可能需要添加一些描述来解释您的代码如何/为什么解决了发帖人的原始问题。

【解决方案4】：

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

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

Here你也可以找到详细的说明，在第12点下你可以看到iframe代码。

【讨论】：

【解决方案5】：

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

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

How to view Google drive pdf link in iframe

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

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

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

【讨论】：

jqueryrain 链接重定向到一个看起来像骗子的“你赢得了免费的 iPhone”页面。我想知道页面内容是否在其他地方可用？
我明白了。我想我应该在我的帖子上加上一个过期日期。（警告：不能保证链接在发布四年后仍然可以使用......）或类似的东西。 8^P
我认为这就是为什么人们不断评论说我们不应该只发布链接而是总结他们的内容。
现在这甚至是一个答案吗？在那之后链接已经过期并且没有更换？恶心。

【解决方案6】：

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

问候

【讨论】：

我们最终使用了这种方法，它运行良好且易于实现。

【解决方案7】：

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

在任何情况下它都不会为我滚动（iPad air 2 和 air 1 至少在 iOS 8 上）。或者它会滚动过度拉伸的字母，或者只适用于 1-2 页的短文档。

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

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

【讨论】：

【解决方案8】：

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

我的容器元素中也设置了这个属性：

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

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

【讨论】：