Safariで動的に作成したファイルをダウンロードしたときの挙動について
解決したいこと
事象としては解決しています。原因がわからない為教えて下さい。
Vue.jsでリンクを押下すると、APIからのレスポンスで受け取ったExcelファイルがダウンロードされる機能を実装しました。
Chrome(Win10)では問題なくダウンロードできたのですが、iOS14.8のSafariから行うと表示される下記のようなダイアログ内の「表示」を押下してもなにも表示されません。
「ダウンロード」を押下した際はちゃんとファイルがダウンロードされていました。
(画像はネットから拾ってきたもの)
| 環境 | 言語・バージョン |
|---|---|
| フロント | Vue.js |
| バック | Node.js(Express) |
| iOS | 14.8 |
| safari | safari 14.0.2 |
事象発生時のソースコード
APIからのレスポンスをFileReaderで読み込み、読み込んだ値を動的に作成したa要素のhrefにセット。
ファイル名をdownloadに指定してa要素をクリックさせる。といった動き。
ApiService.excel(id)
.then(response =>{
if(response.status != 200 ) {
this.errorMessage = this.$t('error.error_unknown');
} else {
let link = document.createElement('a');
let reader = new FileReader();
reader.readAsDataURL(response.data);
reader.onload = function() {
link.href = reader.result;
link.download = "excelファイル.xlsx";
link.click();
}
}
})
.catch(error => {
this.errorMessage = this.$t('error.error_unknown');
});
解消後のソース
以下のソースで「表示」を押下すると同タブ内でExcelファイルが表示されました。
ApiService.excel(id)
.then(response =>{
if(response.status != 200 ) {
this.errorMessage = this.$t('error.error_unknown');
} else {
let link = document.createElement('a');
const blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
link.href = URL.createObjectURL(blob);
link.click();
}
})
.catch(error => {
this.errorMessage = this.$t('error.error_unknown');
});
0