【问题标题】:Issue with openning PDF in iOS 11.3 Using PWA使用 PWA 在 iOS 11.3 中打开 PDF 的问题
【发布时间】:2020-01-25 20:13:36
【问题描述】:

我在我的 PWA 中使用了 Vuejs 和 Framework7。我想在我的 PWA 中打开一个远程 PDF 文件,对我来说,用户在打开 PDF 后能够返回我的 PWA 也很重要。我是这样做的:

window.open(pdf_url, "_blank");

它适用于 iOS > 12,打开 pdf 文件后,有一个“确定”按钮用于关闭 pdf。

但例如在 iOS 11.3 中没有按钮,用户必须使用主页按钮来关闭 PWA。

我尝试使用 iframe 解决问题,但我只能显示 pdf 的第一页。

有没有办法解决这个问题?

【问题讨论】:

    标签: ios vue.js pdf progressive-web-apps html-framework-7


    【解决方案1】:

    你可以通过一些技巧来解决这个问题(对于任何没有返回按钮的设备):

    1. 如果您使用 iframe,您可以使用溢出滚动手动设置高度,我认为这将解决问题(样式依赖或 lib 依赖,因此可能不起作用)。
    2. 您可以在导航栏或工具栏中添加返回按钮,让用户单击它返回上一页。 (我更喜欢这种解决方案)。
    3. 您可以在嵌套普通html页面的弹出窗口中渲染pdf,然后您可以通过处理后退按钮或通过dropback覆盖处理关闭来自定义弹出组件。

    我在实际项目中使用了第二点和第三点,并且效果很好......

    这是弹出窗口中使用的示例关闭按钮代码:

    '<p><a href="#" class="button button-small popup-close">'+ i18nextHelper.i18next.t('Exit From PDF') +'</a></p>'
    

    注意:您也可以只为pdf页面自定义高度,并在其下方添加普通按钮,或者在PDF上方添加绝对定位按钮,但我认为使用第二点或第三点最好。

    祝你好运。

    【讨论】:

    • 感谢您的好回答。我尝试了第二种解决方案,但没有奏效。我将scrolling="yes" 添加到&lt;iframe&gt;,但它只显示PDF 的第一页。我会尝试第一个和第三个解决方案,如果它们有效,我会接受你的答案。
    猜你喜欢
    • 2018-09-09
    • 2018-10-03
    • 2018-09-11
    • 2014-04-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多