Symfoware

Symfowareについての考察blog

ブラウザ(JavaScript)で複数のファイルを一括ダウンロードさせる

例えば1回ボタンを押したら、3つの画像を一気にダウンロードさせたい。


aタグのclick



こちらが参考になりました。
【JavaScript】各ブラウザでダウンロード処理を実装する(Chrome, Firefox, IE, MS Edge, Safari)
ファイルをダウンロードさせるには?[JavaScript]


html側


  1. <!doctype html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>Download Sample</title>
  6. </head>
  7. <body>
  8. <script type='text/javascript'>
  9. function multi_download() {
  10.     handleDownload("001.jpg");
  11.     handleDownload("002.jpg");
  12.     handleDownload("003.jpg");
  13. }
  14. function handleDownload(name) {
  15.     
  16.     // IE
  17.     if (window.navigator.msSaveBlob) {
  18.         var xhr = new XMLHttpRequest();
  19.         xhr.open("GET", "cgi-bin/sample.py?f="+name, true);
  20.         xhr.responseType = "blob";
  21.         xhr.onload = function (e) {
  22.             var blob = xhr.response;
  23.             window.navigator.msSaveBlob(blob, name);
  24.         }
  25.         xhr.send();
  26.         return;
  27.     }
  28.     
  29.     // chrome,firefox
  30.     var a = document.createElement('a');
  31.     a.download = name;
  32.     a.href = "cgi-bin/sample.py?f="+name;
  33.     
  34.     document.body.appendChild(a);
  35.     a.click();
  36.     document.body.removeChild(a);
  37.     
  38.     
  39. }
  40. </script>
  41.     <input type="button" value="ダウンロード" onclick="multi_download()">
  42. </body>
  43. </html>




aタグに画像ダウンロード用のスクリプトを指定します。
直接画像を指定しても良いのですが、
「Content-Type: application/force-download」
としたいため、一旦スクリプトを経由して画像ファイルのダウンロードを実行しています。

IEでもchromeやfirefoxで使用しているaタグを利用する手が使えるのですが、
a.target = "_blank"
を指定しないとダウンロードしてくれません。

ダウンロードする画像数分タブが表示されては消える挙動となるため、
msSaveBlobで保存しています。



cgiスクリプトは、ヘッダーをつけて画像を読み込み返すだけ。


  1. #!/usr/bin/env python
  2. # -*- coding:utf-8 -*-
  3. import sys
  4. import cgi
  5. import cgitb
  6. cgitb.enable(display=0, logdir='./')
  7. # パラメーターを取得
  8. form = cgi.FieldStorage()
  9. file_name = form['f'].value
  10. print('Content-Type: application/force-download;');
  11. print('Content-disposition: attachment; filename="' + file_name + '";');
  12. print('X-Download-Options: noopen\r\n')
  13. with open('image/' + file_name, 'rb') as f:
  14.     sys.stdout.write(f.read())






chromeでの動作



ボタンをクリックすると、初回のみ「複数ファイルのダウンロード」のダイアログが表示されます。

744_01.png

「許可」を選択すると、複数ファイルのダウンロードが実行されます。

「許可」を選択した場合、設定の[プライバシー] - [コンテンツの設定]の項目
[自動ダウンロード]の例外の管理に追加されます。

744_02.png




firefoxでの動作



ファイルに対しての操作を確認されます。
「ファイルを保存する」を選択し、「今後この種類のファイルは同様に処理する」としておけば、
複数ファイルのダウンロードが可能となります。

744_03.png


「設定」のプログラムで管理されています。

744_04.png




IE



IEの場合は厄介で、ファイル数分確認のダイアログが表示されます。

744_05.png




【参考URL】

【JavaScript】各ブラウザでダウンロード処理を実装する(Chrome, Firefox, IE, MS Edge, Safari)
ファイルをダウンロードさせるには?[JavaScript]
JavaScriptでファイルダウンロード処理を実現する
Web アプリケーションからファイルを扱う
PDFなどのファイルを強制的にダウンロードさせる3つ方法の比較
pythonでダウンロードCGIにハマった件の解決
関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/04/16(日) 19:12:16|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Pure-FTPdの認証情報をMySQL(MariaDB)で管理する | ホーム | Python 組み込みのCGIHTTPServerやhttp.serverでcgiを動かす>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1978-7f5ca73c
この記事にトラックバックする(FC2ブログユーザー)