【问题标题】: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 字段中,它就不起作用了!!

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-11-30
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多