Sencha Touch 2 上的 PDF 查看器

Question

我在 Sencha touch2 上遇到了一个奇怪的情况。

我在此框架中阅读和显示 PDF 文件时遇到问题。我在 sencha forum/google .etc 上读到了这个，但我并没有真正找到真正的解决方案。

我有一个带有 PDF 网址的 JSON 对象提要（PDF 不在本地）。

我试过这个：

---

• <embed type="application/pdf" width="100%" height="100%" src="file.pdf" />

  我有滚动问题，t 只显示第一页，因为 Sencha 有自己的滚动面板......等等

---

• <object data="YourFile.pdf" TYPE="application/x-pdf" width="100%" height="100%" </object>

它有同样的东西，滚动问题

---

• <iframe src="http://docs.google.com/viewer?url='+encodeURI+'&embedded=true" width="100%" height="780" style="border: none;"></iframe>

我有点喜欢 google 的想法，但我认为它在我的 Ipad 上不起作用，我认为 google 需要登录，以防你想阅读查看 PDF

---

PS：我在 sencha 面板中将所有这 3 种方法设置为 HTML：

            {
                xtype:'panel',
                height:'100%'
                html:'iframe or object or google'
            }   

是否有人找到了解决方案或解决方法来查看 pdf 文件？

感谢您的帮助!!!!!

Answer 1

我发现我使用或计划使用的替代品很少：

1. Google PDF 查看器https://docs.google.com/viewer，这对我来说并不完美，当您登录并且会话已过期时，它会出现一些会话问题
2. 如果您的应用可以打开 PDF 的新窗口，您可以在浏览器版本中打开一个新窗口，例如可以在 Phonegap ChildBrowser 中使用来查看 pdf
3. 我曾经将 1 个应用程序用于第三方服务前：http://crocdoc.com/，但对我来说并不适用，因为在我可以在应用程序中预览后，我需要在 http://crocdoc.com/ 中上传 pdf，但未启用苍蝇
4. 下一个对我来说是使用 pdfjs https://github.com/SunboX/st2_pdf_panel。我仍然需要处理跨域文档，但这就是我所得到的。

如果您有一个非常棒的真正解决方案，但这个问题在我的应用程序实施期间一直存在，不确定在这种情况下哪个是真正的解决方案。

Answer 2

是的，亲爱的，您可以使用以下示例在 sencha touch-2 上轻松查看 pdf 文档：

Ext.Viewport.add({
        //first we define the xtype, which is tabpanel for the Tab Panel component
        xtype: 'tabpanel',

        //next we define the items that will appear inside our tab panel
        items: [
            {
                //each item in a tabpanel requires the title configuration. this is displayed
                //on the tab for this item
                title: 'Tab 1',

                //next we give it some simple html
                items: {
                    html: '1',
                    centered: true
                },

                //then a custom cls so we can style it
                cls: 'card1'
            },
            {
                //title
                title: 'Tab 2',

                //the items html
                items: {
                    html: '2',
                    centered: true
                },

                //custom cls
                cls: 'card2'
            },
            {
                //title
                title: 'Tab 3',

                //the items html
                items: {
                    html: '<embed type="application/pdf" width="800px" height="800px" src="YourFile.pdf" />',
                    centered: true
                },

                //custom cls
                cls: 'card3'
            }
        ]
    });