在 iPad 的新选项卡中以 base64 格式显示 PDF（Safari 或 Chrome for iOs）2021

Question

我在一个 Angular 网络应用程序中工作，我在其中从后端 API 获取一个 base64 字符串，它表示一个 PDF 文件。我想在新选项卡中打开该 PDF。我尝试过使用 Blob、iframe 和各种方法，所有这些似乎都适用于我的 Mac 的 chrome 和 safari，它们甚至可以在模拟的 iPad（使用 XCode 和模拟设备的 safari），但它们在真实设备上不起作用（iPad）。这是我用来在新标签页中打开 PDF 的代码，都支持 chrome 和 safari:

首先，我确定浏览器是否为 safari。如果是这种情况，我会预先打开新的 window，因为在 safari 中禁止从 XHR 调用内部打开新选项卡：

var isSafari =
  navigator.vendor &&
  navigator.vendor.indexOf('Apple') > -1 &&
  navigator.userAgent &&
  navigator.userAgent.indexOf('CriOS') == -1 &&
  navigator.userAgent.indexOf('FxiOS') == -1;
if (isSafari) {
  var newWindow = window.open('', '_blank');
}

然后，我进行 XHR 调用以获取 base64 格式的 PDF url，并从中创建一个 Blob：

this.dataService
  .getPDFUrl(this.data.code)
  .subscribe((res) => {
      this.pdfUrl = res.message;
      var byteCharacters = atob(this.pdfUrl);
      var byteNumbers = new Array(byteCharacters.length);
      for (var i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }
      var byteArray = new Uint8Array(byteNumbers);
      var file = new Blob([byteArray], { type: 'application/pdf;base64' });
      this.pdfUrl = (window.URL || window.webkitURL).createObjectURL(file);
      //If browser is Safari, use a Reader to display the PDF in the previously opened window
      if (isSafari) {
        var reader = new FileReader();
        reader.onloadend = function (e) {
          newWindow.location.href = reader.result as string;
        };
        reader.readAsDataURL(file);
      } else {
        //If browser is not Safari, open a new window (works in chrome)
        window.open(this.pdfUrl, '_blank');
      }
  });

我已经尝试过这种方法和许多其他方法，其中 none 可以在真实 iPad 上运行，尽管它们确实可以在模拟 iPad.[=15= 上运行]

关于如何让 base64 中的 PDF 正确显示在 iPad 的新选项卡中，您能否提供任何指导？我需要它在 iOs Safari 或 Chrome 中工作 iOs（我知道它们在内部非常相似）。

提前致谢。

Answer 1

Safari 似乎没有遵循 a 标签的标准。我相信确定了根本原因。来自链接答案中的评论：

Note that specifying a target attribute in Safari seems to override the download attribute (this does not seem to be the case in Chrome, Firefox or Opera).

尝试删除上面代码中的 '_blank'，然后对其进行测试。应该有用！

不幸的是，我不确定您将如何在新标签页中打开它并进行更改。

在 iPad 的新选项卡中以 base64 格式显示 PDF（Safari 或 Chrome for iOs）2021

Display PDF in base64 in a new tab in iPad (Safari or Chrome for iOs) 2021

ios

angular

typescript

ipad

safari