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

Question

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

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

尝试了一个简单的 HTML 标记，但在这种情况下，甚至关闭文件的 ok 都没有显示强制我重新启动应用程序。 当使用 Javascript function window.open() 时，我可以选择“Ok”来关闭文件。

<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 选项卡上使用相同的应用程序时，我可以使用这些选项。

编辑 2019 年 7 月 16 日 看起来 Safari 终于克服了标签上的错误：正如在 iOS: Add support for the download attribute 上看到的那样，这最终会让下载标签再次工作。

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 属性中选择的值呈现（您可以阅读更多详细信息 here），但除此之外它是 1 :1 作为一个普通网络应用程序。

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

---

更新

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

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