当添加到iOS的主屏幕时,如何在PWA上下载动态生成的PDF文件?

时间:2019-07-11 19:51:43

标签: javascript ios iphone safari progressive-web-apps

我有此PWA,用户可以单击该链接以生成PDF格式的报告。 当文件打开时,我只有一个关闭文件的“确定”按钮,仅此而已,当用户将其添加到主屏幕时,会发生这种情况:

https://i.redd.it/24rbih326q931.jpg

尝试了一个简单的HTML标记,但是在这种情况下,甚至无法关闭文件也没有显示迫使我重新启动该应用程序。 使用Javascript函数window.open()时,我可以选择“确定”关闭文件。

<img src="pdf.png" onclick='geraPDF(1045, 45)'>
function geraPDF(c, v){var jan=window.open("geraPdfTermoAdesao.php?c="+c+"&v="+v, "adesao", "location: 0;");}

我想为用户提供打印,共享甚至本地保存该PDF文件的选项。 在Safari选项卡上使用相同的应用程序时,这些选项将失效。

编辑16/07/2019 看来Safari终于克服了标签上的错误:如iOS: Add support for the download attribute所示,这终于使下载标签重新工作了。

1 个答案:

答案 0 :(得分:0)

在主屏幕上“安装” PWA时,它将根据在Web应用清单的display属性中选择的值(您可以阅读更多详细信息here)进行渲染,但不能作为普通 Web应用程序的1:1。

因此,如果您想提供HTML元素来与页面交互(如果我正确理解了您的问题),则必须自己实现它们。最终,您可以实现自定义菜单或标题栏。


更新

通常,如果您打算在PWA中打开外部链接,为了获得更好的用户体验,应该在浏览器中而不是PWA中打开这些链接。通常,用户希望保留在PWA上下文中。 此外,如果您在单独的页面(而不是应用程序内部或应用程序的一部分)中打开PDF,则除了浏览器默认提供的默认按钮之外,您将没有其他按钮。

我建议做的是尝试在应用程序的div /容器内打开PDF(可能有不同的库允许打开),然后添加您可能需要的任何UI元素。