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でdisplay:none/blockの切り替え方法
指定要素の表示非表示を切り替える場合jQueryだとhide/show使うか、t ...
-
-
JavaScriptでWebカメラやスマホカメラを利用してQRコードを読み取りURLを返す方法
JavaScriptのjsQRというライブラリで簡単にWebページ版QRコードリ ...
-
-
CSSとJavaScriptでテキストのコピー防止
あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
異なる文字コード間でform送信する
formの送り手がUTF-8で受け手がEUC-JP、 なんとかしてjavascr ...