Sencha Touch 1.1 - 在面板中显示 PDF答案

【问题标题】：Sencha Touch 1.1 - Display PDF in PanelSencha Touch 1.1 - 在面板中显示 PDF
【发布时间】：2012-03-27 05:17:08
【问题描述】：

我正在为 iPad 使用 Sencha Touch 1.1 构建一个应用程序。如何在 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/，但这似乎有点矫枉过正。

【问题讨论】：

标签： pdf sencha-touch

【解决方案1】：

很遗憾，在 iPad 上使用 Safari (UIWebView) 时，您无法在框架内滚动任何内容。

iPad - cannot scroll inside frame

一个想法是，如果您有服务器端 pdf 生成，则生成一个您知道将适合内容的 PDF，因为您有一个固定的分辨率。您可以将一个较大的 PDF 页面拆分为多个较小的页面。您的服务器语言中应该有一个库。然后，您可以利用轮播或标签面板让用户切换页面，有点像读书。

【讨论】：

【解决方案2】：

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

举个例子：

<!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 字段中，它就不起作用了！！

你有什么想法吗？抱歉，这不是一个真正的答案，但不可能发表评论:)

【讨论】：