質問編集履歴

2

不足していると思われる点を追記した。

2020/02/14 06:25

投稿

flaumig
flaumig

スコア67

test CHANGED
File without changes
test CHANGED
@@ -26,12 +26,16 @@
26
26
 
27
27
  上記1.と2.の間(APIレスポンスの取得が完了するまでの間)、ブラウザ上に何も表示されないため
28
28
 
29
- 「ユーザビリティが悪い。よくあるダウンロード処理のようにボタンを押したらすぐにブラウザのダウンロードバーを表示し、
29
+ 「ユーザビリティが悪い。よくあるダウンロード処理のようにボタンを押したらすぐにブラウザ標準機能のダウンロードバーを表示し、
30
30
 
31
31
  ダウンロードの進行状況が分かるようにしてほしい(下記イメージ)」との指摘を受けました。
32
32
 
33
33
 
34
34
 
35
+ ■図1
36
+
37
+ Chrome標準のダウンロードバーで進行状況が表示される事
38
+
35
39
  ![ダウンロードバー](83eb5fb6451bbde85f91857aaf45aba9.png)
36
40
 
37
41
  ※これは参考画像であり、私が作成しているサイトの画像ではありません
@@ -40,6 +44,32 @@
40
44
 
41
45
 
42
46
 
47
+ ### 実現したいこと
48
+
49
+ 下記のような流れになるのが理想的です。
50
+
51
+
52
+
53
+ 1. ユーザが画面上のダウンロードボタンをクリック(非同期でファイルデータ取得APIリクエストを行う)
54
+
55
+ 2. ファイルの保存ダイアログが開く
56
+
57
+ 3. ユーザがダイアログの「保存」ボタンをクリック
58
+
59
+ 4. ブラウザのダウンロードバーが表示される(■図1参照)**…ここでユーザはダウンロードの進行状況が分かる**
60
+
61
+ 4. ダウンロード完了後、ダウンロードバーから保存されたファイルを開ける
62
+
63
+
64
+
65
+ 別途プログレスバーなどを実装するのではなく、
66
+
67
+ JSだけで、このような事が可能なのかを知りたいです。
68
+
69
+
70
+
71
+
72
+
43
73
  ### 発生している問題
44
74
 
45
75
 

1

ソースに認証ヘッダを追加

2020/02/14 06:25

投稿

flaumig
flaumig

スコア67

test CHANGED
File without changes
test CHANGED
@@ -178,6 +178,8 @@
178
178
 
179
179
  xhr.open(method, url, true);
180
180
 
181
+ xhr.setRequestHeader("X-Authorization", "認証情報");
182
+
181
183
  xhr.setRequestHeader("Content-Type", "application/json");
182
184
 
183
185
  xhr.responseType = "blob";