質問編集履歴
2
不足していると思われる点を追記した。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,13 +12,28 @@
|
|
|
12
12
|
|
|
13
13
|
しかしサイズの大きいファイルをダウンロードしようとしたところ、
|
|
14
14
|
上記1.と2.の間（APIレスポンスの取得が完了するまでの間）、ブラウザ上に何も表示されないため
|
|
15
|
-
「ユーザビリティが悪い。よくあるダウンロード処理のようにボタンを押したらすぐにブラウザのダウンロードバーを表示し、
|
|
15
|
+
「ユーザビリティが悪い。よくあるダウンロード処理のようにボタンを押したらすぐにブラウザ標準機能のダウンロードバーを表示し、
|
|
16
16
|
ダウンロードの進行状況が分かるようにしてほしい（下記イメージ）」との指摘を受けました。
|
|
17
17
|
|
|
18
|
+
■図1
|
|
19
|
+
Chrome標準のダウンロードバーで進行状況が表示される事
|
|
18
20
|
|
|
19
21
|
※これは参考画像であり、私が作成しているサイトの画像ではありません
|
|
20
22
|
|
|
21
23
|
|
|
24
|
+
### 実現したいこと
|
|
25
|
+
下記のような流れになるのが理想的です。
|
|
26
|
+
|
|
27
|
+
1. ユーザが画面上のダウンロードボタンをクリック（非同期でファイルデータ取得APIリクエストを行う）
|
|
28
|
+
2. ファイルの保存ダイアログが開く
|
|
29
|
+
3. ユーザがダイアログの「保存」ボタンをクリック
|
|
30
|
+
4. ブラウザのダウンロードバーが表示される（■図1参照）**…ここでユーザはダウンロードの進行状況が分かる**
|
|
31
|
+
4. ダウンロード完了後、ダウンロードバーから保存されたファイルを開ける
|
|
32
|
+
|
|
33
|
+
別途プログレスバーなどを実装するのではなく、
|
|
34
|
+
JSだけで、このような事が可能なのかを知りたいです。
|
|
35
|
+
|
|
36
|
+
|
|
22
37
|
### 発生している問題
|
|
23
38
|
|
|
24
39
|
下記のような実装を行っていますが、
|
1
ソースに認証ヘッダを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -88,6 +88,7 @@
|
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
xhr.open(method, url, true);
|
|
91
|
+
xhr.setRequestHeader("X-Authorization", "認証情報");
|
|
91
92
|
xhr.setRequestHeader("Content-Type", "application/json");
|
|
92
93
|
xhr.responseType = "blob";
|
|
93
94
|
xhr.timeout = 10000;
|