やっほー
【JavaScript】ファイルを複数ダウンロードする方法!

【JavaScript】ファイルを複数ダウンロードする方法!

JavaScriptにて、サーバ側で作成したファイル(PDF)などを複数ダウンロードすることも多々あるかと思います

僕が業務で遭遇したケースでは、

  • iTextというライブラリを使用し、サーバ側でPDFを作成
  • サーバ側で作成したPDFファイルをダウンロード
  • ただし、ファイルは複数作成されるケースあり

というものでした。

蓋を開けてみるとそこまで難しくないのですが、なかなかうまくいかない部分もあるので、どういった方法で解決したかをご紹介します。

前提

ファイルのダウンロードはブラウザ依存の部分もあります。

僕が実行した環境は「IE11」になります。

ファイルを複数ダウンロードする方法

以下がソースコードになります。

解説

まず、ファイルの複数ダウンロードを実現するために一番効率の良い方法は「XMLHttpRequest」を使用する方法です。

理由は以下の通りです。

  1. 複数ファイルのダウンロードを行うには、クライアント側に処理を戻す必要がある。
  2. クライアント側に処理が戻る代表例としてajaxが存在するが、ajaxはファイル情報をテキストとして取得してしまう(バイナリで取得する必要あり)。
  3. 単純にajaxを使用するだけでは、ファイルダウンロード後に表示される黄色のバーが表示されない(クライアント側でダウンロード処理を書かなくてはならない)。
  4. ③の理由から、クライアント側にファイルのバイナリ情報を渡す必要があり、②の理由からajaxは使用できないわけではないが面倒になる。

「XMLHttpRequest」はajaxの組み込みモジュールのため、挙動としてはajaxと何ら変わりません。ただし、少しコーディング方法は変わってきます。

 

23行目のコンテンツタイプは、ファイルのバイナリ情報を取得するため「blob」となります。

 

今回はサーバ側からPDFの情報を取得するため、32行目はPDFとしています。

 

③の問題を解決するために、今回はIEの独自関数を使用してファイルのダウンロードを行っています。

複数ファイルダウンロードの注意点

ファイルダウンロード

上記の処理を複数回呼び出すことで複数ファイルのダウンロードが可能となります。

よく見るファイルダウンロード後の黄色バーですが、複数ファイルダウンロードを行うと黄色のバーが上に重なったような状態で複数出ます

これはブラウザの問題なのでどうしようもないですが、ファイル名を指定してあげれば分かりやすくはなります。

まとめ

ファイルのダウンロード処理はブラウザなどの環境を考慮する必要がありますし、ajaxの仕様も理解しておかなくてはならないので少々厄介です。

ただ、一つずつ問題をつぶしていけば大したコード量にもならないですし、難しいものでもないので是非参考にされてみてください。

【JavaScript】ファイルを複数ダウンロードする方法!
フォローしてもらえると泣いて喜びます