オフィス狛 技術部の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
以上となります。
同じようにはまった方の参考になりましたら、幸いです🍭
Angular , JavaScript
0 件のコメント:
コメントを投稿