Question

我正在使用Sencha Touch 1.1为iPad构建应用程序。如何在Ext.Panel中显示PDF？

我尝试通过将src属性设置为PDF文件来同时使用embed和iframe元素。 iPad显示PDF文件但滚动被禁用 - 即我可以看到PDF的第一页但无法向下滚动以查看其他页面。

接下来我尝试使用window.open（url_to_pdf）。这将在新选项卡中打开PDF文件，如果用户正在从Safari浏览应用程序，但是如果他们已将应用程序添加到主屏幕，则没有任何标签概念：用户可以看到PDF文件（并滚动浏览）但无法返回应用程序。

我正在简要地看一下使用这个库将PDF呈现为HTML：http://andreasgal.com/2011/06/15/pdf-js/但它看起来有点矫枉过正。

Answer 1

不幸的是，在iPad上使用Safari（UIWebView）时，无法在框架内滚动任何内容。

iPad - cannot scroll inside frame

如果你有服务器端pdf生成，那就是生成一个你知道适合内容的PDF，因为你有一个固定的分辨率。您可以将一个大型PDF页面拆分为多个较小的页面。您的服务器语言应该有一个库。然后，您可以利用轮播或制表符让用户切换页面，就像读书一样。

Answer 2

在我看来，问题有点不同。您可以在iPad Safari上实现滚动（但用两根手指），但是当您将相同的代码放入＆＃34; html＆＃34; Ext.Panel的字段，这不起作用。

举个例子：

<!DOCTYPE HTML>
    <html>
    <head>
      <title>Testing iFrames on iPad</title>
      <style>
      div {
        border: solid 1px green;
        height:100px;
      }

    .scroller{
        border:solid 1px #66AA66;
        height: 400px;
        width: 400px;
        overflow: auto;
        text-align:center;
    }
    </style>

</head>

<body>

    <table>
      <tr>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
      </tr>
      <tr>
      <td><div class="scroller">
        <iframe width="400" height="400" src="http://www.supremecourt.gov/opinions/11pdf/11-393c3a2.pdf" ></iframe>
    </div>
        </td>
        <td>
        <div id="scroller" style="border:solid 1px #66AA66;
        height: 400px;
        width: 400px;
        overflow: auto;
        text-align:center;">
        <iframe src="http://ctan.mackichan.com/macros/latex/contrib/bibleref/samples/sample.pdf" width="100%" height="100%"></iframe>
        </div>
    </div>
        </td>
      </tr>
    </table>
    <div> Here are some additional contents.</div>
</body>
</html>

这在iOS Safari上运行正常，但如果你试图获取最后一个div并放入Ext.Panel.html字段，它就不起作用!!

你对此有任何想法吗？对不起，这不是一个真正的答案，但是不可能发表评论:)）

Sencha Touch 1.1 - 在面板中显示PDF

2 个答案: