JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法
ページ内にdownload属性が付与されている画像が複数あり、何らかのボタンをクリック時に全ての画像をまとめてダウンロードさせたい。PHPが利用可能な環境であればZIPファイル化の上、ダウンロードさせる形を取るがASPを利用したサイトのためPHPが利用不可だった。そのためJavaScriptでの対応方法を以下にメモ。
サンプル
https://taitan916.info/sample/js_download/
画像をクリックすると個別にダウンロード、「一括ダウンロード」ボタンをクリックすると全画像がダウンロードできる筈。
ソースコード
<div> <a href="001.jpg" class="img" download> <img src="001.jpg"> </a> <a href="002.jpg" class="img" download> <img src="002.jpg"> </a> <a href="003.jpg" class="img" download> <img src="003.jpg"> </a> </div> <button id="download">一括ダウンロード</button> <script> document.querySelector('#download').addEventListener('click', function() { document.querySelectorAll('.img').forEach(function(e){ e.click(); }); }); </script>
所感
e.click()部分はjQueryのclickイベントだと動かなかったため、実装の際はバニラJSで対応すること。
関連記事
-
-
highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる
highcharts.jsで「棒グラフと折れ線グラフを入れる」「Y軸はそれぞれ違 ...
-
-
JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法
「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...
-
-
バニラJS対応(jQuery非依存)の通知(トースト)系ライブラリ「Notyf」の利用方法
以前に通知(トースト)系ライブラリ「Toastr」の利用方法をメモしたが、こちら ...
-
-
formでGET送信時に空のパラメータを送信しない方法(cleanQuery)
フォームでGET送信する際、通常だと空のパラメータも送信される。結果として「ドメ ...
-
-
javascriptで実行時間の測定
var time_test = function(){ var x = 1; f ...