在 iPhone 和 iPad Safari 浏览器的新窗口中打开 Blob URL答案

【问题标题】：Open Blob URL in new window on iPhone and iPad Safari Browsers在 iPhone 和 iPad Safari 浏览器的新窗口中打开 Blob URL
【发布时间】：2021-05-22 20:21:08
【问题描述】：

我正在尝试根据服务器返回的响应生成 PDF 文件并在新选项卡中打开该文件。它在所有浏览器的桌面上运行良好，但在苹果设备（iphone + ipad）的 safari 浏览器中存在问题。

这里是sn-p的代码：

if (responseType = base64 encoded string like JVBERi0xLjUKJeLjz9MKMSAwI....) {
   const binaryString = window.atob(fileResponseData);
   const bytes = new Uint8Array(binaryString.length);
   const binaryToBlob = bytes.map((byte, i) => binaryString.charCodeAt(i));
   const blob = new Blob([binaryToBlob], { type: 'application/pdf' });
   this.downloadFile(blob, fileName);
} else {
   // blob response like %PDF-1.7 %âãÏÓ5 0 obj....
   const blob = new Blob([fileResponseData], { type: 'application/pdf' });
   this.downloadFile(blob, fileName);
}

这就是我下载文件的方式

if (window.navigator && window.navigator.msSaveOrOpenBlob) {
   window.navigator.msSaveOrOpenBlob(blob, fileName);
   return;
}

const url = (window.URL || window.webkitURL).createObjectURL(blob);
window.open(url, '_blank');

我知道有关于这个主题的相关文章，但它们并没有解决我的问题。事实上，我想出了上面提到这些文章本身的代码，但我仍然面临苹果设备的问题。一旦我单击按钮生成文件并在新选项卡中显示，苹果设备上没有任何反应，但其他设备工作正常。

【问题讨论】：

标签： javascript ios pdf mobile-safari bloburls

【解决方案1】：

我在使用 iOS 14.3 的 iPhone 6s+ 上遇到了同样的问题。看起来这是 iPhone/iPad 上 Safari 的一项功能，如果window.open() 停留在某些不同的事件中（例如onload/onloadend 事件或setTimeout），它会阻止弹出窗口。您可以尝试将 window.open() 移动到另一个作用域或函数中以查看结果。

至于我的问题，我通过创建一个隐藏的锚标签然后点击它来解决它：

mySmallDiv.innerHTML = '<a href="+'url'+" target="_blank" id="openPdf">&nbsp;</a>';
document.getElementById("openPdf").click();

但 Safari 可能仍会阻止它，因此请相应地更改您的代码。
并且，不要忘记在超时后拨打URL.revokeObjectURL(url)。

此外，如果浏览器是 Chrome iOS，我认为您需要使用 FileReader()。

【讨论】：