IOS 上的 Angular 下载 PDF 大多在同一选项卡中打开

Question

我在我的 Angular 应用程序中使用文件保护程序来下载在我的后端生成的 PDF。该库通常在桌面和 android 上运行良好。但我似乎无法在 IOS 上下载文件。如 GitHub 页面中所述，文件保护程序也不会在新页面中打开 blob。它只是在同一页面上打开（不需要）。有趣的是，它在 safari 中运行良好（它会打开一个对话框，要求我下载，然后在不打开的情况下下载它）。在任何其他浏览器（opera、firefox 和 chrome）中，它似乎都不起作用。

我已经尝试了文件保护程序、downloadJ、自己创建一个锚标记以及下载属性、使用 application/octet-stream mime-type 和互联网上发布的其他几个解决方案。大多数浏览器中的所有这些方法都什么都不做，或者在同一页面中打开 PDF blob，而不是下载它或在新选项卡中打开它（正如文件保护程序在 IOS 上所说的那样）。

我正在 Google Cloud 函数中生成 PDF。有没有办法跳过整个客户端，让浏览器直接从那里下载文件？

是否有人对如何在移动 IOS 上下载 PDF 有其他想法（例如，通过服务人员或其他方式）？

提前致谢

Answer 1

根据新 chrome 规范 https://developers.google.com/web/updates/2018/02/chrome-65-deprecations 的最佳解决方案

原版 JavaScript

public static downloadFile(url: string): void {
     const xmlHttp = new XMLHttpRequest();
     xmlHttp.onreadystatechange = () => {
       if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
         const blobUrl = window.URL.createObjectURL(xmlHttp.response);
         const e = document.createElement('a');
         e.href = blobUrl;
         e.download = blobUrl.substr(blobUrl.lastIndexOf('/') + 1);
         document.body.appendChild(e);
         e.click();
         document.body.removeChild(e);
       }
     };
     xmlHttp.responseType = 'blob';
     xmlHttp.open('GET', url, true);
     xmlHttp.send(null);
   }

如果你使用 angular 试试这个。

async downloadBrochure(url: string) {
    try {
      const res = await this.httpClient.get(url, { responseType: 'blob' }).toPromise();
      this.downloadFile(res);
    } catch (e) {
      console.log(e.body.message);
    }
  }

  downloadFile(data) {
    const url = window.URL.createObjectURL(data);
    const e = document.createElement('a');
    e.href = url;
    e.download = url.substr(url.lastIndexOf('/') + 1);
    document.body.appendChild(e);
    e.click();
    document.body.removeChild(e);
  }