在 iPhone 上的新 window 和 iPad Z50DE9BC68C93DC32D8C7C90509 瀏覽器上打開 Blob URL

Question

我正在嘗試根據從服務器返回的響應生成 PDF 文件並在新選項卡中打開該文件。 它在所有瀏覽器的桌面上運行良好，但在 safari 瀏覽器中的蘋果設備（iphone + ipad）中存在問題。

這是代碼片段：

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');

我知道有關於這個主題的相關文章，但它們並沒有解決我的問題。 事實上，我想出了上面提到這些文章本身的代碼，但我仍然面臨蘋果設備的問題。 一旦我單擊按鈕生成文件並在新選項卡中顯示，蘋果設備上沒有任何反應，但其他設備工作正常。

Answer 1

我在使用 iOS 14.3 的 iPhone 6s+ 上遇到了同樣的問題。 看起來它是 iPhone/iPad 上 Safari 的一個功能，如果window.open()停留在一些不同的事件中（例如onload / onloadend事件或setTimeout ），它會阻止彈出窗口。 您可以嘗試將window.open()移動到另一個 scope 或 function 以查看結果。

至於我的問題，我通過創建一個隱藏的錨標記然后單擊它來解決它：

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

但是 Safari 可能仍然會阻止它，所以請相應地更改您的代碼。
而且，不要忘記在超時后調用URL.revokeObjectURL(url) 。

此外，如果瀏覽器是 Chrome iOS，我認為您需要使用FileReader() 。