在 iPad 的新标签页中以 base64 格式显示 PDF（Safari 或 Chrome for iOs）2021

Question

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

首先，我确定浏览器是否为 safari。如果是这种情况，我会预先打开新窗口，因为在 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');
      }
  });

我已经尝试过这种方法和许多其他方法，但它们都不能在真正的 iPad 上工作，即使它们可以在模拟的 iPad 上工作。

您能否提供有关如何让 base64 格式的 PDF 在 iPad 的新标签页中正确显示的任何指导？我需要它在 iOs Safari 或 Chrome for iOs 中工作（我知道它们在内部非常相似）。

提前谢谢你。

Answer 1

似乎 Safari 不遵循 a 标签的标准。我相信this previous SO post 确定了根本原因。来自链接答案中的 cmets：

请注意，在 Safari 中指定目标属性似乎会覆盖下载属性（在 Chrome、Firefox 或 Opera 中似乎不是这种情况）。

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

很遗憾，我不确定你会如何在新标签页中打开它。