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で対応すること。
関連記事
-
-
バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う方法
サーバ内のCSVファイルを読み込み、そのデータをサイト上で取り扱いたい。通常だと ...
-
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みライブラリ「lazysizes」の利用方法
あるサイトのコーディングデータを貰った際に「lazysizes」というJavaS ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...