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

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

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

我尝试过文件保护程序、downloadJ，使用 application/octet-stream mime-type 和其他一些发布在互联网上的解决方案，自己创建一个锚标记和下载属性。大多数浏览器中的所有这些方法都不会执行任何操作或在同一页面中打开 PDF blob，而不是下载它或在新选项卡中打开它（如文件保护程序所述，它可以在 IOS 上执行）。

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

有没有人对如何在移动 IOS 上下载 PDF 有其他想法（例如，通过 service worker 或其他方式）？

提前致谢

解决方法

根据新的 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);
  }