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

Question

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

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

尝试了一个简单的<a href>HTML 标签，但在这种情况下，甚至没有显示关闭文件的确定性，迫使我重新启动应用程序。 当使用JavaScriptfunction 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终于克服了标签上的错误：<a href="" download="name">如上所示： iOS：添加对下载属性的支持，这最终将使下载标签再次工作。

Answer 1

为我工作！

    function downloadPDF(url) { 
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function(e) {
        if (this.status == 200) {
          var myBlob = this.response;
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(myBlob);
          link.download = "yourname.pdf";
          link.click();
        }
      };
      xhr.send();
    }

Answer 2

当您在主屏幕上"安装"PWA 时，它会根据 Web 应用清单的display属性中选择的值呈现(可以在此处阅读更多详细信息)，但除此之外，它是普通 Web 应用程序的 1：1。

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

---

更新

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

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