Question

出于某种原因，iPad safari浏览器无法很好地处理嵌入式PDF。单独启动时，PDF可以自行查看，但不能使用object标签。问题是他们不滚动。

我有一个带有嵌入式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>

任何方法可以在没有硬编码的情况下完成这项工作吗？

Answer 1

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

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

How to view Google drive pdf link in iframe

此解决方案包括良好的显示渲染和简单的分页和缩放控制。如果要将其嵌入iframe或对象标记中，请确保包含＆amp; embedded = true选项，否则它将无法正常工作。查看者需要一个可公开访问的文档URL，因此如果您有安全问题，例如我，您将需要编写一个Web服务来从单个使用令牌提供文档。

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

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

Answer 2

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

此致

Answer 3

MSD的答案非常准确。我一直在尝试以多种方式实现它，从一些建议使用对象，嵌入元素等库。

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

我发现最有效的解决方案是通过用户代理提供iPad用户链接直接访问文件，他们将能够在选项卡中看到它并在其中滚动得很好。它没有嵌入，但它是我能找到的最有效和最有效的解决方案。

我希望它有助于某人钻研同样的事情

Answer 4

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

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

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

我无法实现的是让它填充容器的宽度，但至少可以浏览文档。

Answer 5

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

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

Here，您还可以找到详细的说明；在第12点，您可以看到iframe代码。

Answer 6

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

Answer 7

希望这可以在将来对其他人有所帮助。我使用Google的pdf查看器来在iframe中滚动pdf。因此，在src标记上，网址是

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

Answer 8

您好，我也遇到过同样的问题。在所有浏览器中，除了野生动物园浏览器之外，我都没问题要嵌入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">

使嵌入式PDF可在iPad中滚动

8 个答案: