月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! 今は農作業中のため東京にいるよ! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

・iTextというライブラリを使用し、サーバ側でPDFを作成

・サーバ側で作成したPDFファイルをダウンロード

・ただし、ファイルは複数作成されるケースあり

というものでした。

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

 

 

前提

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

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

 

 

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

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

 

 

解説

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

理由は以下の通りです。

①複数ファイルのダウンロードを行うには、クライアント側に処理を戻す必要がある。

②クライアント側に処理が戻る代表例としてajaxが存在するが、ajaxはファイル情報をテキストとして取得してしまう(バイナリで取得する必要あり)。

③単純にajaxを使用するだけでは、ファイルダウンロード後に表示される黄色のバーが表示されない(クライアント側でダウンロード処理を書かなくてはならない)。

④③の理由から、クライアント側にファイルのバイナリ情報を渡す必要があり、②の理由からajaxは使用できないわけではないが面倒になる。

 

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

 

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

xhr.responseType = 'blob';

 

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

var blob = new Blob([bom, pdf], {type: 'text/pdf'});

 

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

window.navigator.msSaveBlob(blob, fileName);

 

 

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

ファイルダウンロード

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

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

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

 

 

まとめ

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

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

Travelerを知らないの?