質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
ダウンロード

リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

JSでのファイルダウンロード時、ブラウザのダウンロードバーにダウンロードの進行状況を表示したい

flaumig
flaumig

総合スコア67

ダウンロード

リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

3回答

1評価

2クリップ

10945閲覧

投稿2020/02/14 05:31

編集2020/02/14 06:25

前提・実現したいこと

JSでファイルのダウンロード処理を実装しており、
その処理は下記のように動作しています。

  1. ユーザが画面上のダウンロードボタンをクリック(非同期でファイルデータ取得APIリクエストを行う)
  2. ファイルの保存ダイアログが開く
  3. ユーザがダイアログの「保存」ボタンをクリック
  4. ブラウザのダウンロードバーに保存されたファイルが表示される

ダウンロード対象のファイルは取得用APIが存在し、レスポンスとしてファイルのバイナリデータを返します。

しかしサイズの大きいファイルをダウンロードしようとしたところ、
上記1.と2.の間(APIレスポンスの取得が完了するまでの間)、ブラウザ上に何も表示されないため
「ユーザビリティが悪い。よくあるダウンロード処理のようにボタンを押したらすぐにブラウザ標準機能のダウンロードバーを表示し、
ダウンロードの進行状況が分かるようにしてほしい(下記イメージ)」との指摘を受けました。

■図1
Chrome標準のダウンロードバーで進行状況が表示される事
ダウンロードバー
※これは参考画像であり、私が作成しているサイトの画像ではありません

実現したいこと

下記のような流れになるのが理想的です。

  1. ユーザが画面上のダウンロードボタンをクリック(非同期でファイルデータ取得APIリクエストを行う)
  2. ファイルの保存ダイアログが開く
  3. ユーザがダイアログの「保存」ボタンをクリック
  4. ブラウザのダウンロードバーが表示される(■図1参照)…ここでユーザはダウンロードの進行状況が分かる
  5. ダウンロード完了後、ダウンロードバーから保存されたファイルを開ける

別途プログレスバーなどを実装するのではなく、
JSだけで、このような事が可能なのかを知りたいです。

発生している問題

下記のような実装を行っていますが、
この状態では、一旦バイナリデータを全て受け取ってからwindow.URL.createObjectURLでオブジェクトを作成し、
ダウンロードさせているため、進行中の表示を行うことが出来ません。

他の実装方法があるのかと調べてみましたが、恥ずかしながら見つけることができませんでした。
もしこちらの要望を満たす方法をご存じの方がいらっしゃいましたら、ご教示頂けますようお願い致します。

ソース

JavaScript

function downloadFile(method, url) { const xhr = new XMLHttpRequest(); //レスポンス取得時 xhr.onload = function (e) { const res = xhr.response; if (xhr.status != 200) { //ステータスが200以外の場合(省略) return; } if (res.type !== 'application/octet-stream') { //レスポンスがバイナリ以外の場合(省略) return; } //レスポンスヘッダからファイル名を取得する const disposition = xhr.getResponseHeader('Content-Disposition'); if (disposition && disposition.indexOf('attachment') !== -1) { const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/; const matches = filenameRegex.exec(disposition); if (matches != null && matches[1]) { fileName = matches[1].replace(/['"]/g, ''); } } //ブラウザごとのダウンロード処理 if (window.navigator.msSaveBlob) { // for IE window.navigator.msSaveBlob(res, fileName); } else if (window.URL && window.URL.createObjectURL) { // for Chrome & Firefox const link = document.createElement('a'); link.href = window.URL.createObjectURL(res); link.download = decodeURI(fileName); link.click(); } }; //レスポンス受信の失敗時 xhr.onerror = function (e) { //省略 }; //タイムアウト時 xhr.ontimeout = function (e) { //省略 } //処理のキャンセル時 xhr.onabort = function (e) { //省略 } xhr.open(method, url, true); xhr.setRequestHeader("X-Authorization", "認証情報"); xhr.setRequestHeader("Content-Type", "application/json"); xhr.responseType = "blob"; xhr.timeout = 10000; xhr.send(null); }

環境

JQuery 3.2.1
Chrome 78.0.3904.97

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

ダウンロード

リモートシステムからローカルシステムへとデータを受信する事、もしくはそのようなデータ転送を行う事をダウンロードと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。