2021年3月29日月曜日

windows.openを使用した時に、iOSのSafariにて別タブでファイルを開けない場合の対処法。


オフィス狛 技術部のmmm(むー)です。

タイトルの通りですが、windows.open()を使用した際にiOSのSafariにて別タブでファイルを開くことができなかったため、その対処法を書きます。

業務でしたかったこと
・フロント(Angular)にて、リンクを押下した後PDFを別タブで開く
 1. リンクを押下後、APIを呼ぶ
 2. API(Express)で、S3にあるPDFデータ(Blob)をレスポンスする
 3. フロントにてAPIからのレスポンスを取得した後、別タブを開きPDFを表示する

問題点
・iOS(Safari)だけリンクを押しても何も反応しない
・PCブラウザ(Chrome、 Firefox、 Sarfari)やiOSブラウザ(Chrome)はリンク押下後に別タブでPDFを開くことができる

原因
・Safariでは、非同期処理内でwindows.opon()を実行すると呼び出しをブロックするため
observable.subscribe(downloadData => {
	  const blob = new Blob([downloadData], { type: 'application/pdf' });
	  const fileURL = window.URL.createObjectURL(blob);
    window.open(fileURL, '_blank');
})

解決方法
・非同期処理が始まる前に、windows.open() を実行するように変更する
this.windowReference = window.open();  // <- 🌟変更

observable.subscribe(downloadData => {
	  const blob = new Blob([downloadData], { type: 'application/pdf' });
	  const fileURL = window.URL.createObjectURL(blob);
    this.windowReference.location = fileURL;  // <- 🌟変更
})

その他
・iOSのSafariはデフォルトの設定で、ポップアップブロックがONになっているので、OFFにすることで開けるようになります。
・ただ、別タブで開くか確認するポップアップが表示されますし、デフォルトはONになっています。
設定変更方法:iPhoneの設定 > Safari > ポップアップブロックをOFF

以上となります。
同じようにはまった方の参考になりましたら、幸いです🍭

,

0 件のコメント:

コメントを投稿