勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

JavaScriptでdownload属性が付与されている画像を一括ダウンロードさせる方法

  JavaScript

ページ内に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

  関連記事

Leafletでマーカークリック時に当該マーカーをバウンド(跳ねる動作を)させる方法

LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...

JavaScriptで文字列から数値(特に小数)へ変換時の注意点

JavaScriptで文字列から数値へ変換時に想定していた結果と異なることがあっ ...

ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法

ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...

Ajaxで負荷軽減

業務中、専用のページでfile_get_contents的なものは あまり使わな ...

jQuery UIでカレンダーピッカー(Datepicker)の利用方法

フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...